Usando

Design Responsivo

Todos os utilitários podem ser aplicados condicionalmente em diferentes breakpoints, criando interfaces completamente adaptivas.

Se você não está familiarizado com os breakpoints e variantes disponíveis no Tailwind, recomendamos dar uma checada na documentação oficial.

Arraste o handle do demo para ver o funcionamento

<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>

O exemplo inclui breakpoints que são padrões no Tailwind e um exemplo configurado arbitrariamente usando md-[valor-arbitrario], customizando o desing para diferentes tamanhos de telas.

Só usamos alguns breakpoints nesse examplo, mas você pode facilmente customizar esse componente para outros tamanhos usando prefixos como lg, xl, or 2xl.