Tailwind CSS - Guia do iniciante ao profissional

Este artigo pressupõe que você tenha algum conhecimento prévio de CSS. Se você ainda não aprendeu sobre Cascading Style Sheets, volte a este guia mais tarde. A maioria dos projetos web neste site faz uso do React, então, para configurações Tailwind de HTML e CSS vanilla, visite os documentos oficiais.

O objetivo desse guia é ser uma versão simples da documentação oficial e um recurso de fácil acesso (não esqueça de salvar a página!). Este guia deve incluir alguns dos recursos mais usados e disponíveis através do Tailwind para que você possa se tornar um profissional em pouco tempo. Para casos mais avançados não cobertos aqui, a documentação oficial será sua melhor amiga. Boa sorte!

Passos iniciais

Instale o Tailwind CSS

1npm install -D tailwindcss postcss autoprefixer
2npx tailwindcss init -p

Explicando os comandos acima:

1. Instale o tailwindcss e todas as suas dependências usando o npm
2. Inicie o tailwind no seu projeto criando os arquivos tailwind.config.js e postcss.config.js

Configure o acesso do Tailwind aos arquivos do projeto com o arquivo tailwind.config.js

Para que o Tailwind funcione corretamente, ele precisa estar ciente de quais arquivos ele deve procurar no seu projeto. Nós podemos fornecer essas informações ao Tailwind incluindo a propriedade 'content' no arquivo tailwind.config.js. Essa propriedade aceita uma matriz de caminhos de arquivo.

1import type { Config } from 'tailwindcss';
2
3const config: Config = {e
4  content: [
5    // Atualize aqui com os caminhos de arquivo que se aplicam a você
6    "./index.html",
7    "./src/**/*.{js,ts,jsx,tsx}"
8  ],
9  theme: {
10    extend: {}
11  },
12  plugins: []
13}

Adicione as diretivas Tailwind ao seu CSS

Essas diretivas abrangem cada uma das camadas do Tailwind. Adicione-as ao seu arquivo .css principal para que os estilos do Tailwind possam ter efeito corretamente em todo o seu projeto.

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Estamos prontos para começar! Agora vamos ver quais recursos estão disponíveis para nós através do Tailwind!

Pseudo-classes

As pseudo-classes CSS podem ser aplicadas no Tailwind prefixando suas classes tailwind com o nome do modificador seguido por dois pontos ' : '.

1<button className="bg-violet-500 text-white hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300">
2  Botão estilizado
3</button>

Media Queries

Assim como as pseudo-classes acima, as media queries podem ser aplicadas no Tailwind prefixando suas classes tailwind com o nome do modificador seguido por dois pontos ' : '.

O Tailwind tem um conjunto de breakpoints padrão que você pode ver abaixo. Por padrão, o Tailwind usa um sistema de 'mobile-first breakpoints', o que significa que modificadores não prefixados como 'border-black' se aplicam a todos os tamanhos de tela, enquanto 'md:border-black' se aplica apenas no breakpoint especificado e acima.

Intervalos de breakpoint

Por padrão, os estilos aplicados por modificadores de breakpoint se aplicam ao breakpoint especificado e permanecem em breakpoints maiores.

Se você quiser conter algum estilo entre um intervalo de breakpoints específico, empilhe modificadores responsivos como 'md:' e 'max-*'.

1<div className="md:max-lg:flex">
2  <!-- ... -->
3</div>

Você também pode estender esse comportamento criando seus próprios breakpoints no arquivo tailwind.config.{ts | js}.

1import type { Config } from 'tailwindcss';
2
3const config: Config = {
4  theme: {
5    extend: {
6      screens: {
7        customTabletBreakpoint: '768px',
8        customDesktopBreakpoints: '1280px'
9      }
10    }
11  }
12};
13
14export default config;

1<button className="bg-violet-500 px-4 py-2 text-sm w-full sm:w-fit customTabletBreakpoint:text-base">
2  Botão estilizado
3</button>

Alguns modificadores adicionais e comuns podem ser encontrados abaixo:

Seletores ARIA

Alguns seletores ARIA (Accessible Rich Internet Applications) comuns também estão disponíveis por meio do tailwind, facilitando a segmentação específica de estados ARIA:

Estilos Personalizados

Como dito anteriormente, você pode adicionar seus próprios breakpoints modificando o arquivo tailwind.config.js, no entanto, esta é apenas uma pequena parte dos estilos que você pode estender. Especialmente para projetos com uma marca estabelecida, configurar seu tema nas configurações do tailwind ajudará a garantir consistência e estrutura em todo o projeto.

Para estabelecer cores, espaçamento, tipografia e breakpoints em todo o projeto, o arquivo de configuração do tailwind será seu melhor amigo.

1import type { Config } from 'tailwindcss';
2
3const config: Config = {
4  theme: {
5    screens: {
6      sm: '480px',
7      md: '768px',
8      lg: '976px',
9      xl: '1440px',
10    },
11    colors: {
12      'blue': '#1fb6ff',
13      'pink': '#ff49db',
14      'orange': '#ff7849',
15      'green': '#13ce66',
16      'gray-dark': '#273444',
17      'gray': '#8492a6',
18      'gray-light': '#d3dce6',
19    },
20    fontFamily: {
21      sans: ['Graphik', 'sans-serif'],
22      serif: ['Merriweather', 'serif'],
23    },
24    extend: {
25      spacing: {
26        '128': '32rem',
27        '144': '36rem',
28      },
29      borderRadius: {
30        '4xl': '2rem',
31      }
32    }
33  }
34};
35
36export default config;

Para dicas avançadas, você pode conferir a documentação de Configuração de Temas do tailwind.

Indo além com valores abitrários

Sendo um sistema de design restrito, o tailwind faz um ótimo trabalho ao cobrir a maioria dos principais casos de uso, no entanto, há momentos em que precisamos de uma especificidade que o tailwind não nos fornece diretamente.

Em vez de implementar um estilo embutido ou voltar ao CSS normal para cobrir esses casos, você pode usar a notação de colchetes (ou parênteses retos) do tailwind para gerar classes dinamicamente.

1<div className="top-[117px]">
2  <!-- ... -->
3</div>

Isso funciona da mesma maneira que os estilos embutidos, com o benefício adicional de poder combiná-lo com modificadores interativos como hover: e modificadores responsivos como lg:

1<div className="top-[117px] lg:top-[344px]">
2  <!-- ... --->
3</div>

Nos casos em que você precisa referenciar uma variável CSS, você pode simplesmente fornecer o nome da variável entre colchetes, sem a necessidade de especificar var(...)

1<div className="bg-[--my-background-color]">
2  <!-- ... --->
3</div>

Lidando com espaços em branco

Quando um de seus valores arbitrários precisar conter um espaço, use um sublinhado (`_`). O tailwind o converte automaticamente em um espaço durante o build.

1<div className="grid grid-cols-[1fr_500px_2fr]">
2  <!-- ... -->
3</div>

Em locais onde os sublinhados são comuns, mas os espaços são inválidos, o tailwind preservará o sublinhado, por exemplo, em endereços de arquivo ou web (URLs).

1<div className="bg-[url('/sample_album_cover.png')]">
2  <!-- ... -->
3</div>

Em locais onde um sublinhado é ambíguo (onde tanto um sublinhado qunato um espaço fazem sentido), mas você realmente precisa do sublinhado, você pode escapar o sublinhado com uma barra invertida e o tailwind não o converterá em um espaço. NOTA - Se você estiver usando algo como JSX onde a barra invertida é removida do HTML renderizado, use String.raw() para que a barra invertida não seja tratada como um caractere de escape Javascript:

1// HTML Normal
2<div class="before:content-['hello\_world']">
3  <!-- ... -->
4</div>

1// Equivalente em JSX
2<div className={String.raw`before:content-['hello\_world']`}>
3  <!-- ... -->
4</div>
5

Brindes Adicionais

Há dois outros recursos simples que gostaria de compartilhar para lhes economizar algum tempo de pesquisa: negativos e !important.

Negativos

Por padrão, todas as classes do tailwind possuem valores positivos; por exemplo, leve em consideração a declaração left-4. Esta classe de estilo posicionará o elemento 1 rem à direita do ponto mais à esquerda do container pai relativo mais proximo. E se você quisesse que esse valor fosse -1 rem?

Uma abordagem é usar a notação de colchetes e tornar esta declaração explícita: left-[-1rem].

Uma solução mais simples entretanto, é simplesmente prefixar sua declaração de classe com um travessão '-'. Fazer isso transforma o valor do estilo renderizado em seu equivalente negativo.

1// Transforma o z-index em -50
2<div className="-z-50">
3  <!-- ... -->
4</div>

O modificador '!important'

Pode haver raras situações em que você precise aumentar a especificidade porque está enfrentando conflitos com estilos dos quais você não tem controle sobre. Para contornar esses conflitos, geralmente se usa a propriedade CSS !important.

No tailwind, você pode especificar essa mesma propriedade para suas declarações de classe prefixando a classe com o ponto de exclamação '!'. Isso marcará o estilo renderizado com a propriedade !important

1<p className="!font-medium font-bold">
2  A fonte aqui será em estilo medio, mesmo com a classe de tailwind especificando a fonte em negrito depois.
3</p>

Considerações Finais

Um último recurso que gostaria de deixar para vocês é esta útil folha de dicas. Isso o ajudará a identificar mais facilmente os equivalentes do tailwind às transformações em CSS que você planeja fazer. Tudo isso apenas arranha a superfície do que o tailwind pode fazer, no entanto, com este pequeno guia, além da folha de dicas vinculada, você poderá lidar com qualquer projeto sem maiores problemas. Obrigado por ler este guia! Boa sorte!