Usage
Responsive Design
Every utility class can be applied conditionally at different breakpoints, building complex responsive interfaces.
Take a look on the Tailwind documentation to learn more about available utilities and variants.
Drag handle in the demo to see the expected behaviour
<divclassName="bg-white border grid grid-cols-6 grid-rows-4 sm:pt-6 h-96"><divclassName="col-span-2 self-center md:row-span-4 sm:border-r border-gray-200"><RcRocketIconclassName="icon-sky-900 mx-auto block size-16 max-[300px]:size-12 sm:size-20 md:size-56" /></div><divclassName="col-span-4 self-center sm:ml-14 md:ml-6 md:mt-16 md:row-span-2"><pclassName="font-semibold text-xs sm:text-sm md:text-sm max-[300px]:text-[10px] text-sky-500 tracking-normal dark:text-sky-400">A funny way handling icons</p><spanclassName="text-primary dark:text-primary text-3xl sm:text-4xl md:text-5xl max-[300px]:text-2xl"><spanclassName="font-quicksand">rocket</span><spanclassName="font-quicksand font-semibold">icons</span></span></div><divclassName="col-span-6 row-span-3 sm:mt-6 sm:pl-6 md:col-span-4 md:pl-2 md:mt-0 md:row-span-2"><pclassName="mx-4 mt-2 sm:text-lg md:text-sm text-slate-700 dark:text-slate-400 font-normal">Styling in a way<RcRocketIconclassName="icon-primary-base sm:icon-lg md:icon-sm" />you've never seen before.</p><pclassName="mx-4 mt-2 sm:text-lg md:text-sm text-slate-700 dark:text-slate-400 font-normal">Looking for a way to share code between web and native applications?</p><pclassName="mx-4 mt-2 sm:text-lg md:text-sm text-slate-700 dark:text-slate-400 font-normal">This tool can help you achieve that goal.</p></div></div>
The example above works using the Tailwind breakpoints, including an arbitrary one using md-[arbitrary-value]
, customizing the design for different screen sizes.
We’ve only used few breakpoint in this example, but you could easily customize this component at other sizes using the lg
, xl
, or 2xl
responsive prefixes as well.