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.