Tailwind CSS

O que é Tailwind CSS?

Tailwind CSS é um pequeno framework CSS focando em classes utilitárias↗ para criar designs personalizados, sem a troca de contexto que o CSS normal exige. É puramente uma estrutura CSS e não fornece nenhum componente ou lógica pré-criada, e fornece um conjunto muito diferente de benefícios↗ em comparação com um biblioteca de componentes como Material UI.

Isso torna o CSS incrivelmente fácil e rápido de escrever, conforme mostrado no exemplo a seguir:

CSS Antigo:

1. Escreva CSS, geralmente em um arquivo separado

.minha-classe {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  padding: 1rem;
}

2. Importe o CSS no seu componente

import "./minha-classe.css";

3. Adicione a classe no seu HTML

<div class="minha-classe">...</div>

Equivalente com Tailwind:

1. Basta escrever classes em seu HTML

<div
  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
>
  ...
</div>

Quando usado em conjunto com Componentes React, é extremamente poderoso para construir UIs rapidamente.

O Tailwind CSS possui um belo design system integrado, que vem pronto para uso com uma paleta de cores cuidadosamente escolhida, padrões de dimensionamento para estilos como largura/altura e preenchimento/margem para um design uniforme, bem como breakpoints para criar layouts responsivos. Este design system pode ser personalizado e estendido para criar a caixa de ferramentas exata de estilos que seu projeto precisa.

Tru Narla mais conhecido como mewtru↗ deu uma palestra incrível sobre construindo um design system usando Tailwind CSS↗.

Uso

Certifique-se de ter plug-ins de editor para Tailwind instalados para melhorar sua experiência de escrita Tailwind.

Extensões e Plugins

• Extensão para o VSCode↗
• Integration com JetBrains↗
• Neovim LSP↗

Formatação

As classes Tailwind CSS podem facilmente ficar um pouco confusas, então um formatador para as classes é obrigatório. Tailwind CSS Prettier Plugin↗ classifica as classes na ordem recomendada↗ para que as classes correspondam ao pacote css gerado. Ao selecionar o Tailwind na CLI, instalaremos e configuraremos isso para você.

Aplicação de classe condicional

Adicionar classes condicionalmente usando ternários pode ficar muito confuso e difícil de ler. Esses pacotes ajudam a organizar suas classes ao usar alguma lógica condicional.

• clsx↗
• classnames↗

Recursos Úteis