nsosoares.dev
← Voltar ao início

Tailwind CSS: estilização utilitária para o dia a dia

·1 min read·
csstailwindfrontend

O que é o Tailwind CSS?

O Tailwind CSS é um framework CSS utilitário que te permite estilizar elementos diretamente no HTML usando classes pré-definidas. Em vez de escrever CSS customizado, usas classes como text-xl, font-bold, mt-4.

Por que usar?

Velocidade de desenvolvimento

Não precisas de alternar entre ficheiros HTML e CSS. Toda a estilização está no mesmo sítio.

Consistência

O Tailwind fornece um design system com espaçamentos, cores e tipografia consistentes:

  • text-sm, text-base, text-lg para tipografia
  • px-4, py-2, mx-auto para espaçamento
  • bg-white, text-zinc-900, border-zinc-200 para cores

Responsividade

Prefixos responsivos tornam fácil adaptar o layout:

<div class="text-sm md:text-base lg:text-lg">
  Conteúdo responsivo
</div>

Dark mode

Com o Tailwind, o dark mode é simples:

<div class="bg-white dark:bg-zinc-950">
  <h1 class="text-black dark:text-white">Título</h1>
</div>

Conclusão

O Tailwind CSS é uma ótima opção para quem quer rapidez e consistência. Experimenta e vê a diferença no teu fluxo de trabalho!