Tailwind

Introdução ao Tailwind

✅ Vantagens:

Produtividade: Estilização muito rápida.
Consistência: Tudo segue um padrão.
Sem sobrescritas confusas de CSS.
Responsivo fácil: Com prefixos como sm:, md:, lg:.

❗️Desvantagem para alguns:

Pode parecer "bagunçado" no início, pois o HTML fica cheio de classes.
Precisa de um processo de build (tipo npm run build) para otimizar o CSS final.

O Tailwind CSS precisa de um processo chamado build (compilação), onde ele lê seu HTML/Django templates, verifica quais classes do Tailwind você está usando, e gera um CSS final otimizado (só com as classes usadas).

Esse processo é feito por ferramentas baseadas em Node.js, como: tailwindcss (o pacote principal), postcss (opcionalmente), autoprefixer (pra compatibilidade com navegadores).

O tailwind só gera CSS para as classes que ele encontrar nos seus arquivos (HTML, JS, templates Django, etc.) e colocar dentro do arquivo que foi definido no output.

Comandos Tailwind

Usa o gerenciador npm. O arquivo tailwind.config.js serve para: Definir quais arquivos o Tailwind deve analisar (para gerar o CSS). Personalizar cores, fontes, breakpoints etc. Adicionar plugins, etc.

bash

$ npm install -D tailwindcss@3.4.10
$ npx tailwindcss init # le cria um arquivo de configuração tailwind.config.js

| Exemplo com e sem Tailwind

arquivo_comum_css.css

.botao {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

Estiliza um botão da classe botao no html.

tailwind.html

<button class="bg-blue-500 text-white px-4 py-2 rounded">Enviar</button>

Feito no proprio arquivo html.

comando	O que significa
`tailwindcss`	chama o compilador do Tailwind
`-i static/tw/tailwind-input.css`	define o arquivo de entrada (input)
`-o static/css/ui.css`	define o arquivo de saída (output) — onde será gerado o CSS final
`--watch`	fica de olho nos seus arquivos para recompilar automaticamente sempre que houver mudanças

package.json

{
  "scripts": {
    "dev": "tailwindcss -i static/tw/tailwind-input.css -o static/css/ui.css --watch"
  },
  "devDependencies": {
    "tailwindcss": "^4.1.3"
  }
}

tailwind-input.css