diogodev_

Voltar à listagem

Conteúdo

Dicas para trabalhar com Tailwind CSS

Tailwind CSS se tornou uma das ferramentas mais populares para estilização de aplicações modernas. Sua abordagem utility-first permite construir interfaces rapidamente, reduzindo a necessidade de criar arquivos CSS extensos e facilitando a manutenção dos componentes.

O que é Tailwind CSS?

Tailwind CSS é um framework CSS baseado em classes utilitárias.

Ao invés de criar várias classes personalizadas:

.card {
  padding: 16px;
  border-radius: 8px;
  background: white;
}

Podemos escrever:

<div class="p-4 rounded-lg bg-white">
</div>

Essa abordagem torna o desenvolvimento mais rápido e reduz a quantidade de CSS customizado.

Organize os componentes

Uma prática comum entre iniciantes é criar componentes enormes com dezenas de classes.

Por exemplo:

<button
  className="
    bg-blue-600
    hover:bg-blue-700
    text-white
    px-4
    py-2
    rounded-lg
    shadow
  "
>
  Salvar
</button>

Quando esse componente começa a ser reutilizado, vale a pena extraí-lo:

<Button>
  Salvar
</Button>

Isso melhora a manutenção do projeto.

Utilize classes em uma ordem consistente

Uma convenção comum é:

flex
items-center
justify-between

p-4

text-sm

bg-white

border

rounded-lg

shadow

Agrupar as classes facilita a leitura do código.

Utilize clsx

Ao trabalhar com classes condicionais, clsx ajuda bastante.

Instalação:

npm install clsx

Exemplo:

import clsx from "clsx";

<button
  className={clsx(
    "px-4 py-2 rounded",

    isActive
      ? "bg-blue-600"
      : "bg-gray-400"
  )}
>
  Salvar
</button>

Isso deixa os componentes mais limpos.

Utilize cva para variantes

A biblioteca class-variance-authority ajuda a criar componentes reutilizáveis.

Instalação:

npm install class-variance-authority

Exemplo:

const buttonVariants = cva(
  "rounded px-4 py-2",

  {
    variants: {

      variant: {

        primary:
          "bg-blue-600 text-white",

        secondary:
          "bg-gray-300"
      }
    }
  }
);

Uso:

<button
  className={buttonVariants({
    variant: "primary"
  })}
>
  Salvar
</button>

Essa abordagem é muito utilizada em projetos com shadcn/ui.

Aproveite o Flexbox

Tailwind possui excelente suporte ao Flexbox.

Exemplo:

<div
  class="flex items-center justify-between"
>
</div>

Classes úteis:

  • flex;
  • items-center;
  • justify-center;
  • gap-4;
  • flex-col.

Utilize Grid para layouts

Exemplo:

<div class="grid grid-cols-3 gap-4">
</div>

Muito útil para:

  • Cards;
  • Dashboards;
  • Listagens.

Trabalhe com responsividade

Uma das melhores características do Tailwind é a responsividade.

Exemplo:

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

Breakpoints mais utilizados:

PrefixoTamanhosm≥ 640pxmd≥ 768pxlg≥ 1024pxxl≥ 1280px

Utilize Dark Mode

Configuração:

darkMode: "class"

Exemplo:

<div
  class="
    bg-white
    dark:bg-zinc-900
  "
>
</div>

Isso facilita bastante a implementação de temas.

Evite CSS desnecessário

Muitas vezes não é necessário criar:

.title {
  font-size: 24px;
}

Basta:

<h1 class="text-2xl">
</h1>

Menos CSS significa menos manutenção.

Utilize componentes reutilizáveis

Ao invés de repetir:

<div
  className="
    bg-white
    p-4
    rounded-lg
    shadow
  "
>
</div>

Crie:

<Card>
  Conteúdo
</Card>

Isso deixa a aplicação mais organizada.

Extenda o tema

No arquivo:

tailwind.config.js

Podemos adicionar cores personalizadas:

theme: {

  extend: {

    colors: {

      primary: "#2563eb"
    }
  }
}

Uso:

<button class="bg-primary">
</button>

Utilize Prettier Plugin

Instalação:

npm install prettier-plugin-tailwindcss

Esse plugin organiza automaticamente as classes.

Exemplo:

Antes:

<div class="rounded p-4 flex bg-white">
</div>

Depois:

<div class="flex rounded bg-white p-4">
</div>

Ferramentas que ajudam

Algumas ferramentas úteis:

  • Tailwind IntelliSense;
  • Prettier Plugin Tailwind;
  • clsx;
  • class-variance-authority;
  • shadcn/ui;
  • Headless UI.

Boas práticas

Evite componentes gigantes

Quebre componentes em partes menores.

Reutilize padrões

Botões, cards e inputs geralmente merecem componentes próprios.

Utilize gap

Prefira:

gap-4

Ao invés de vários:

mr-4
ml-4

Aproveite a responsividade

Use:

  • md:
  • lg:
  • xl:

para criar interfaces adaptáveis.

Utilize Tailwind junto com TypeScript

Essa combinação funciona muito bem em aplicações React e Next.js.

Vantagens

  • Desenvolvimento rápido;
  • Pouco CSS customizado;
  • Responsividade simples;
  • Excelente integração com React;
  • Fácil manutenção;
  • Grande comunidade.

Conclusão

Tailwind CSS mudou bastante a forma como construímos interfaces modernas. Utilizando componentes reutilizáveis, ferramentas como clsx e cva e aproveitando recursos como responsividade e dark mode, é possível criar aplicações organizadas e fáceis de manter.

Se você trabalha com React ou Next.js, Tailwind é uma ferramenta que vale muito a pena conhecer.

Saiba mais