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-slate-900 dark:text-white 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-slate-900-base sm:icon-slate-900-lg md:icon-slate-900-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.