Formação Tailwind

O que é Tailwind CSS?

Tailwind é um framework CSS utility-first, ou seja, ao invés de usar classes genéricas como .btn ou .card, usamos pequenas classes utilitárias diretamente no HTML para controlar espaçamento, cor, tipografia e layout. Isso reduz a dependência de CSS externo e torna o desenvolvimento mais direto e consistente.

Um dos recursos mais poderosos do Tailwind é a possibilidade de usar valores arbitrários, que permitem ultrapassar os limites do tema padrão. Com isso, podemos escrever classes como:

w-[72px] - largura personalizada
columns-[3] - número arbitrário de colunas
col-[var(--grid-cols)] - integração com variáveis CSS
size-[40%] - controle proporcional em altura/largura

Também existem cinco breakpoints padrão inspirados nos equipamentos mais comuns:

Breakpoint prefix	Minimum width	CSS
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }

Além disso, o Tailwind CSS é altamente personalizável. Podemos criar temas personalizados, definir cores, tamanhos e espaçamentos de acordo com as necessidades do projeto. Isso nos permite manter a consistência visual em toda o projeto.

Namespace	Classes utilitárias
--color-*	Cores customizadas, como --color-light, --color-dark, --color-primary...
--font-*	Utilitários de família tipográfica, como font-sans
--text-*	Utilitários de tamanho de texto, como text-xl
--font-weight-*	Utilitários de peso de fonte, como font-bold
--tracking-*	Utilitários de espaçamento entre letras, como tracking-wide
--leading-*	Utilitários de altura de linha, como leading-tight
--breakpoint-*	Variantes responsivas, como sm:*
--container-*	Variantes de container, como @sm:* e utilitários de largura, como max-w-md
--spacing-*	Utilitários de espaçamento e dimensionamento, como px-4, max-h-16, entre outros
--radius-*	Utilitários de raio de borda, como rounded-sm
--shadow-*	Utilitários de sombra de caixa, como shadow-md
--inset-shadow-*	Utilitários de sombra interna, como inset-shadow-xs
--drop-shadow-*	Utilitários de filtro de sombra projetada, como drop-shadow-md
--blur-*	Utilitários de desfoque, como blur-md
--perspective-*	Utilitários de perspectiva, como perspective-near
--aspect-*	Utilitários de proporção, como aspect-video
--ease-*	Utilitários de função de transição, como ease-out
--animate-*	Utilitários de animação, como animate-spin

Exemplo de utilização:

            
              @theme {

               /* custom breakpoints */
               --breakpoint-xs: 30rem;
               --breakpoint-2xl: 100rem;
               --breakpoint-3xl: 120rem;
               
               /* custom color variables */
                --color-light: #c9eefb;
                --color-dark: #4789a0;
              }

            
              <div class="w-xs bg-light text-dark p-5">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum at doloremque dolores recusandae, natus inventore voluptatibus aliquam explicabo accusamus porro sequi eveniet est voluptatem nostrum? Adipisci deserunt quos optio sunt.</p>
              </div>

Resultando:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum at doloremque dolores recusandae, natus inventore voluptatibus aliquam explicabo accusamus porro sequi eveniet est voluptatem nostrum? Adipisci deserunt quos optio sunt.

Vantagens em usar Tailwind

Alta performance:

O Tailwind CSS gera ficheiros CSS extremamente leves. Com suas classes utilitárias, é possível aplicar estilos reutilizáveis de forma rápida, sem precisar criar novas classes ou escrever CSS manualmente. A reutilização de componentes reduz a dependência de código extra e melhora o tempo de carregamento da página.

Altamente flexível e adaptável:

Tailwind é um framework altamente configurável. Apesar de vir com configurações padrão, elas podem ser facilmente personalizadas. O ficheiro de configuração permite ajustar paletas de cores, espaçamentos, temas e outros estilos conforme a identidade visual do projeto.

Economia de tempo e esforço:

Ao usar o Tailwind, economizamos tempo ao nomear classes e organizar código. Ele oferece padrões utilitários comuns que resolvem diversos problemas — desde especificação de classes até a organização e o controle de herança de estilos. As utilitárias facilitam a criação de componentes personalizados com rapidez.

Eficiência aumentada:

Em vez de definir estilos em ficheiros CSS separados, o Tailwind permite aplicar estilos diretamente no HTML. Essa abordagem reduz o tempo de desenvolvimento e promove maior consistência no design da interface.

Abordagem Utility-First:

Diferente do Bootstrap, que foca em componentes prontos, o Tailwind prioriza utilitários. Ele oferece uma gama muito maior de classes de baixo nível, permitindo que os desenvolvedores criem designs únicos sem depender de elementos pré-construídos.

Responsividade e estados:

O Tailwind fornece prefixos como md:, lg:, etc, para controlar os breakpoints, e estados como hover, dark mode através de prefixos como hover:, dark:, etc.

Instalação

A instalação do TailWind CSS pode ser feita de várias formas, de acordo com a necessidade do projeto e o nível de customização que se pretende. Para projetos mais extensos é recomendado instalar Tailwind via Node.js, integrando com ferramentas como PostCSS, Webpack ou Vite.

Instalação via Vite

Criamos o projeto Vite seguindo o passo-a-passo da sua instalação, e também instalamos o Tailwind CSS

Mesmo usando o Vite, é útil instarl o plugin PostCSS para que, conforme citado anteriormente, sejam utilizadas as diretivas do Tailwind

                
                  npm create vite@latest meu-projeto
                  cd meu-projeto
                  npm install tailwindcss @tailwindcss/vite

Criar o ficheiro vige.config.js

                
                  import { defineConfig } from 'vite';

                  import tailwindcss from '@tailwindcss/vite';

                  export default defineConfig({

                   plugins: [tailwindcss()],

                  });

Importar o Tailwind no src/style.css.

                
                  @import "tailwindcss";

Por fim, iniciamos o servidor de desenvolvimento

                
                  npm run dev

Instalação via Node.js + PostCSS

Primeiro, instalamos o Tailwind CSS e o PostCSS via npm.

                
                  npm install -D tailwindcss postcss autoprefixer

                  npx tailwindcss init -p

Inserir no ficheiro css o import do Tailwind CSS

                
                  @import "tailwindcss";

Depois, criamos o ficheiro de configuração tailwind.config.js, considerando o caminho correto para os ficheiros HTML e JS:

                
                  module.exports = {

                   content: [

                    './src/**/*.{html,js}',

                   ],

                   theme: {

                    extend: {},

                   },

                   plugins: [],

                  }

Por fim, iniciamos o servidor de desenvolvimento

                
                  npm run dev

Utilizando o PostCSS podermos utilizar algumas diretivas do Tailwind, como por exemplo o @apply no CSS final. Essa abordagem nos permite escrever estilos de forma modular e reaproveitável.

Exemplo desta utilização:

                
                  section {

                   @apply p-10;

                   &.even {

                    @apply bg-emerald-100;

                   }

                   &.odd {

                    @apply bg-emerald-200;

                   }

                  }

Instalação via CDN

Também é possível fazer uma instalação rápida via CDN

                
                  <script src="https://cdn.tailwindcss.com"></script>

Tailwind CSS no VS Code com IntelliSense

Para melhorar a produtividade no desenvolvimento com Tailwind CSS, é recomendado utilizar o plugin oficial Tailwind CSS IntelliSense no VS Code.

Autocompletar: Sugestões automáticas de classes Tailwind enquanto digitamos.
Preview de estilos: Visualização rápida do que cada classe faz (ex: cor, espaçamento, tamanho, etc).
Suporte a valores arbitrários: O plugin entende classes como w-[72px] e bg-[color:rgba(0,0,0,0.5)].
Validação de classes: Classes inválidas aparecem sublinhadas, ajudando a evitar erros.

Para instalar, procure por "Tailwind CSS IntelliSense" da equipe Tailwind Labs.

Exemplos de classes

Card

                
                  <div class="bg-white shadow-md rounded-lg p-6">

                    Conteúdo do Card

                  </div>

Conteúdo do Card

Grid

                
                  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

                    <div class="bg-gray-200 p-4">Item 1</div>

                    <div class="bg-gray-200 p-4">Item 2</div>

                    <div class="bg-gray-200 p-4">Item 3</div>

                  </div>

Item 1

Item 2

Item 3

Modal

                
                  <button onclick="document.getElementById('myModal').classList.remove('hidden')" class="px-4 py-2 bg-blue-400 hover:bg-amber-800 text-white rounded">

                    Abrir Modal

                  </button>

                  <div class="fixed inset-0 flex items-center justify-center hidden z-50" id="myModal">

                    <div class="absolute inset-0 bg-black opacity-50 h-full w-full"></div>

                    <div class="bg-white shadow-lg rounded-lg p-6 w-1/2 z-10 relative">

                      <button onclick="document.getElementById('myModal').classList.add('hidden')" class="absolute top-2 right-3 text-gray-700 hover:text-gray-900">

                        ×

                      </button>

                      <h3>Conteúdo do Modal</h3>

                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos cum ab porro quidem, dicta alias, officiis laborum sunt, tempore iusto id. Officiis similique iste dolore nisi illum consequuntur maxime provident.</p>

                    </div>

                  </div>

Tooltip

                
                  <div class="relative">

                    <button class="bg-emerald-800 hover:bg-emerald-950 text-white py-2 px-4 rounded">

                      Hover me

                    </button>

                    <span class="absolute bg-gray-500 text-white text-xs rounded p-2 -top-10">

                      Tooltip

                    </span>

                  </div>

Tooltip

Animação

                
                    <div class="flex justify-center items-center mt-20">

                      <img src="/orbit.svg" alt="Orbit" class="w-28 h-auto animate-spin" />

                      <img src="/kangaroo.svg" alt="Kangaroo" class="w-28 h-auto animate-bounce" />

                      <img src="/sun.svg" alt="Sun" class="w-28 h-auto animate-pulse" />

                      <img src="/shape-embellishment.svg" alt="Particles" class="w-28 h-auto animate-ping" />

                    </div>

Background

                
                  <div class="flex items-center p-5 bg-[url('/flower-orange.svg')] bg-contain bg-center h-64 w-full rounded-lg">

                    <p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum at doloremque dolores recusandae, natus inventore voluptatibus aliquam explicabo accusamus porro sequi eveniet est voluptatem nostrum? Adipisci deserunt quos optio sunt.</strong></p>

                  </div>

Boas práticas

Algumas boas práticas para manter o código limpo e organizado ao usar Tailwind CSS:

Usar o @apply para componentes reutilizáveis: Quando percebermos que várias partes do layout usam as mesmas classes, devemos criar uma classe customizada no CSS usando @apply.
Exemplo:

                
                  .btn-primary {
                    @apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700;
                  }

Nomear as variáveis no @theme no ficheiro css: para customizar cores, tamanhos ou espaçamentos, nomear com significado (ex: brand-primary ao invés de blue-500).
Utilizar responsividade e estados de forma clara: Exemplo: md:bg-blue-100 hover:bg-blue-200 focus:ring-2 — mantendo uma ordem nas classes, primeiro layout, depois interações.

Fontes

Documentação Tailwind CSS
Krisha Web - TailWind CSS vs. Bootstrap: Which CSS Framework is Better?
LogRocket - Comparing Tailwind CSS to Bootstrap: Is it time to ditch UI kits?
Imagens SVG
Imagens SVG 2
Vozes da minha cabeça 🤓