adityawahyudi-dev/ft_adit

Desenvolvimento com Tailwind CSS

Documentação

Use search-docs para padrões e documentação detalhados do Tailwind CSS v4.

Uso Básico

• Use classes do Tailwind CSS para estilizar HTML. Verifique e siga as convenções existentes do Tailwind no projeto antes de introduzir novos padrões.
• Ofereça-se para extrair padrões repetidos em componentes que correspondam às convenções do projeto (por exemplo, Blade, JSX, Vue).
• Considere posicionamento, ordem, prioridade e valores padrão das classes. Remova classes redundantes, adicione classes a elementos pai ou filho com cuidado para reduzir repetição e agrupe elementos logicamente.

Especificidades do Tailwind CSS v4

• Sempre use Tailwind CSS v4 e evite utilitários obsoletos.
• corePlugins não é suportado no Tailwind v4.

Configuração CSS-First

No Tailwind v4, a configuração é CSS-first usando a diretiva @theme — nenhum arquivo tailwind.config.js separado é necessário:

@theme {
  --color-brand: oklch(0.72 0.11 178);
}

Sintaxe de Importação

No Tailwind v4, importe o Tailwind com uma declaração CSS @import comum, em vez das diretivas @tailwind usadas na v3:

- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";

Utilitários Substituídos

O Tailwind v4 removeu utilitários obsoletos. Use as substituições mostradas abaixo. Para opacidade, remova a classe *-opacity-* e acrescente o valor como modificador na cor existente: bg-blue-500 bg-opacity-50 torna-se bg-blue-500/50, text-white text-opacity-75 torna-se text-white/75.

Obsoleto	Substituição
bg-opacity-*	bg-{cor}/*
text-opacity-*	text-{cor}/*
border-opacity-*	border-{cor}/*
divide-opacity-*	divide-{cor}/*
ring-opacity-*	ring-{cor}/*
placeholder-opacity-*	placeholder-{cor}/*
flex-shrink-*	shrink-*
flex-grow-*	grow-*
overflow-ellipsis	text-ellipsis
decoration-slice	box-decoration-slice
decoration-clone	box-decoration-clone

Espaçamento

Use utilitários gap em vez de margens para espaçamento entre elementos irmãos:

<div class="flex gap-8">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Modo Escuro

Se páginas e componentes existentes suportarem modo escuro, novas páginas e componentes devem suportá-lo da mesma forma, tipicamente usando a variante dark::

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Conteúdo se adapta ao esquema de cores
</div>

Armadilhas Comuns

• Usar utilitários obsoletos da v3 (bg-opacity-, flex-shrink-, etc.)
• Usar diretivas @tailwind em vez de @import "tailwindcss"
• Tentar usar tailwind.config.js em vez da diretiva CSS @theme
• Usar margens para espaçamento entre irmãos em vez de utilitários gap
• Esquecer de adicionar variantes de modo escuro quando o projeto usa modo escuro