Como usar o Tailwind CSS para desenvolver rapidamente sites atraentes

À medida que você avança como desenvolvedor, é mais provável que você use tecnologias que o ajudem a fazer mais escrevendo menos código. Uma estrutura de frontend sólida como Tailwind CSS é uma maneira de conseguir isso.

Neste artigo, aprenderemos sobre Tailwind CSS — uma estrutura CSS que ajuda na construção e design de páginas da web. Começaremos explicando como instalar e integrar Tailwind CSS em seu projeto, ver algumas aplicações práticas e também como você pode criar seus estilos e plugins personalizados.

Excitado? Vamos começar!

O que é Tailwind CSS?

Tailwind CSS é uma estrutura CSS (Cascading Style Sheets) com classes predefinidas que você pode usar para criar e projetar páginas da Web diretamente em sua marcação. Ele permite que você escreva CSS em seu HTML na forma de classes predefinidas.

Vamos definir o que é um framework e o que queremos dizer com “utility-first CSS” para ajudá-lo a entender melhor do que se trata o Tailwind CSS.

O que é um quadro?

Como um termo geral de programação, um framework é uma ferramenta que fornece componentes reutilizáveis ​​e prontos, construídos a partir dos recursos de uma ferramenta já existente. O objetivo geral da criação de frameworks é aumentar a velocidade de desenvolvimento fazendo menos trabalho.

Agora que estabelecemos o significado de uma estrutura, isso deve ajudá-lo a entender que Tailwind CSS é uma ferramenta construída sobre recursos CSS. Todas as funcionalidades do framework foram derivadas de estilos CSS compostos como classes.

O que é uma estrutura CSS de primeiro utilitário?

Quando dizemos CSS com utilidade em primeiro lugar, nos referimos a classes em nossa marcação (HTML) com funcionalidades predefinidas. Isso implica que você só precisa escrever uma classe com estilos predefinidos anexados a ela, e esses estilos serão aplicados ao elemento.

Em um caso em que você está trabalhando com CSS vanilla (CSS sem nenhum framework ou biblioteca), você primeiro daria ao seu elemento um nome de classe e, em seguida, anexaria diferentes propriedades e valores a essa classe, que, por sua vez, aplicaria estilo ao seu elemento .

Vamos mostrar-lhe um exemplo. Aqui, criaremos um botão com cantos arredondados e um texto que diz “Clique em mim”. É assim que o botão ficará:

Faremos isso primeiro usando CSS vanilla e, em seguida, usando classes utilitárias disponíveis no Tailwind CSS.

Com CSS de Baunilha

 <button class="btn">Click me</button>

Demos às tags de botão a classe btn , que será estilizada usando uma folha de estilo externa. Isso é:

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

Com Tailwind CSS

 <button class="bg-black p-2 rounded">Click me</button>

Tudo isso é necessário para obter o mesmo efeito do exemplo com CSS vanilla. Nenhuma folha de estilo externa onde você tem que escrever os estilos foi criada porque cada nome de classe que usamos já tem um estilo predefinido.

Pré-requisitos para usar Tailwind CSS

Antes de usar o Tailwind CSS, existem alguns pré-requisitos que você deve considerar atender para usar os recursos do framework sem dificuldades. Aqui estão alguns deles:

• Bons conhecimentos de HTML, sua estrutura e como funciona
• Base sólida em CSS — consultas de mídia, flexbox e sistema de grade

Onde o Tailwind CSS pode ser usado?

Você pode usar Tailwind CSS em projetos web front-end, incluindo frameworks JavaScript como React.js, Next.js, Laravel, Vite, Gatsby, etc.

Prós e contras do Tailwind CSS

Aqui estão algumas das vantagens de usar Tailwind CSS:

1. Processo de desenvolvimento mais rápido
2. Ajuda você a praticar seu CSS mais, pois os utilitários são semelhantes
3. Todos os utilitários e componentes são facilmente personalizáveis
4. O tamanho geral do arquivo para produção geralmente é pequeno
5. Fácil de aprender se você já conhece CSS
6. Boa documentação para aprender

Algumas das desvantagens de usar Tailwind CSS incluem:

1. Sua marcação pode parecer desorganizada para projetos grandes porque todos os estilos estão nos arquivos HTML.
2. Não é fácil aprender se você não entende bem CSS.
3. Você é forçado a construir tudo do zero, incluindo seus elementos de entrada. Quando você instala o Tailwind CSS, ele remove todos os estilos CSS padrão.
4. Tailwind CSS não é a melhor opção se você deseja minimizar o tempo gasto desenvolvendo o frontend do seu site e principalmente focando na lógica do backend.

Quando usar Tailwind CSS

Tailwind CSS é melhor usado para acelerar o processo de desenvolvimento escrevendo menos código. Ele vem com um sistema de design que ajuda a manter a consistência em vários requisitos de design, como preenchimento, espaçamento e assim por diante; com isso, você não precisa se preocupar em criar seus sistemas de design.

Você também pode usar Tailwind CSS se quiser usar um framework que seja facilmente configurável porque não força você a usar componentes (barras de navegação, botões, formulários e assim por diante) da mesma maneira o tempo todo; você pode escolher como seus componentes devem se parecer. Mas você nunca deve usar o Tailwind se não tiver aprendido e praticado CSS.

Semelhanças e diferenças entre Tailwind CSS e outros frameworks CSS

Aqui estão algumas semelhanças:

1. Eles ajudam você a fazer o trabalho mais rápido.
2. Eles vêm com classes pré-definidas.
3. Eles foram construídos sobre regras CSS.
4. Ambos são fáceis de aprender e usar com um conhecimento prático de CSS.

Agora vamos ver algumas das diferenças:

1. O Tailwind é diferente da maioria dos frameworks porque você precisa criar seus componentes. Por exemplo, o Bootstrap tem componentes como barras de navegação, botões e assim por diante, mas com o Tailwind, você precisa construir tudo isso sozinho.
2. Alguns frameworks como o Bootstrap não são facilmente personalizáveis, então você é forçado a usar seus padrões de design. No Tailwind, você controla o fluxo de tudo.
3. É necessário um conhecimento profundo de CSS para usar o Tailwind. Escrever nomes de classes não é suficiente, pois você deve combiná-los como se estivesse escrevendo CSS vanilla para obter o mesmo resultado. Tudo o que você precisa saber na maioria dos outros frameworks é qual componente será construído quando você usar um nome de classe.

Como começar a usar o Tailwind CSS

Antes de instalar o Tailwind CSS e integrá-lo ao seu projeto, certifique-se de que:

1. Você tem o Node.js instalado em seu computador para usar o gerenciador de pacotes Node (npm) no terminal.
2. Seu projeto está todo configurado com seus arquivos criados.

Esta é a nossa estrutura de projeto no momento:

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

Em seguida, inicie um terminal para seu projeto e execute os seguintes comandos:

 npm install -D tailwindcss

O comando acima instalará o framework Tailwind CSS como uma dependência. Em seguida, gere seu arquivo tailwind.config.js executando o comando abaixo:

 npm install -D tailwindcss

O arquivo tailwind.config.js estará vazio quando criado, então precisamos adicionar algumas linhas de código:

 module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

Os caminhos de arquivo fornecidos na matriz de conteúdo permitirão que o Tailwind limpe/remova qualquer estilo não utilizado durante o tempo de compilação.

A próxima coisa a fazer é adicionar as diretivas “@tailwind” ao seu arquivo CSS na pasta src — é aqui que o Tailwind gera todos os seus estilos de utilitários predefinidos para você:

 @tailwind base; @tailwind components; @tailwind utilities;

A última coisa a fazer é iniciar o processo de compilação executando este comando no seu terminal:

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

No código acima, estamos dizendo ao Tailwind que nosso arquivo de entrada é a folha de estilo na pasta src e que quaisquer estilos que usamos devem ser incorporados ao arquivo de saída na pasta pública. --watch permite que o Tailwind observe seu arquivo em busca de alterações para um processo de compilação automático; omitir isso significa que temos que executar esse script toda vez que queremos construir nosso código e ver a saída desejada.

Usando Tailwind CSS

Agora que instalamos e configuramos o Tailwind CSS para nosso projeto, vamos ver alguns exemplos para entender completamente sua aplicação.

Exemplo de Flexbox

Para usar flex no Tailwind CSS, você precisa adicionar uma classe de flex e depois a direção dos itens flex:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Usar flex-row-reverse irá reverter a ordem em que os botões aparecem.

flex-col os empilha um sobre o outro. Aqui está um exemplo:

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Assim como no exemplo anterior, flex-col-reverse inverte a ordem.

Exemplo de grade

Ao especificar colunas e linhas no sistema de grade, adotamos uma abordagem diferente, passando um número que determinará como os elementos ocuparão o espaço disponível:

 <div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

Cores

Tailwind vem com muitas cores predefinidas. Cada cor tem um conjunto de variações diferentes, sendo a variação mais clara 50 e a mais escura 900.

Aqui está uma imagem de várias cores e seus códigos hexadecimais HTML para ilustrar isso

Daremos um exemplo de como você pode fazer isso usando a cor vermelha acima para dar a um elemento de botão uma cor de fundo:

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

Essa sintaxe é a mesma para todas as cores no Tailwind, exceto preto e branco, que são escritos da mesma maneira, mas sem o uso de números: bg-black e bg-white .

Para adicionar cor de texto, você usa a classe text-{color} :

 <p class="text-yellow-600">Hello World</p>

Preenchimento

O Tailwind já possui um sistema de design que o ajudaria a manter uma escala consistente em seus designs. Tudo o que você precisa saber é a sintaxe para aplicar cada utilitário.

A seguir estão os utilitários para adicionar preenchimento aos seus elementos:

• p denota preenchimento em todo o elemento.
• py denota padding padding-top e padding-bottom.
• px denota padding-left e padding-right.
• pt denota o topo de preenchimento.
• pr denota padding-right.
• pb denota o fundo de preenchimento.
• pl denota preenchimento-esquerdo

Para aplicá-los aos seus elementos, você teria que usar os números apropriados fornecidos pelo Tailwind — um pouco semelhantes aos números que representavam as variantes de cores na última seção. Aqui está o que queremos dizer:

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

Margem

Os utilitários predefinidos para preenchimento e margem são muito semelhantes. Você tem que substituir o p por um m :

• m
• my
• mx
• mt
• mr
• mb
• ml

Como criar um plug-in CSS Tailwind

Embora o Tailwind CSS tenha muitos utilitários e sistemas de design já criados para você, ainda é possível que você tenha uma funcionalidade específica que gostaria de adicionar para estender o que o Tailwind pode ser usado. Tailwind CSS nos permite fazer isso criando um plugin.

Vamos sujar as mãos criando um plugin que adiciona a cor aqua e um utilitário de rotação que gira um elemento 150 no eixo X. Faremos esses utilitários no arquivo tailwind.config.js usando um pouco de JavaScript.

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

Agora, vamos quebrar isso. A primeira coisa que fizemos foi importar a função de plugin do Tailwind:

 const plugin = require("tailwindcss/plugin");

Em seguida, criamos nossos plugins no array plugins:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

Você pode ter que executar novamente o script de compilação depois de criar seu plugin.

Agora que os plugins estão prontos, podemos testá-los:

 <button class="bg-aqua rotate-150deg">Click me</button>

Se você fez tudo certo, você deve ter um botão com uma cor aqua com o texto girado para 150 no eixo X.

Resumo

Os frameworks são uma opção inestimável quando se trata de acelerar seu fluxo de trabalho. Eles ajudam você a criar páginas da Web de boa aparência e profissionais, mantendo a consistência no design. O Tailwind CSS fornece muitas classes CSS de utilitário para ajudar a levar seu design e desenvolvimento web para o próximo nível.

Este artigo nos ensinou o que é Tailwind CSS e o que o torna um framework. Em seguida, analisamos o processo de instalação e vimos alguns exemplos que mostravam como poderíamos criar nossos plugins personalizados para estender a funcionalidade existente.

Se você acompanhou até este ponto, agora você tem uma compreensão básica, mas sólida, de como o Tailwind funciona. No entanto, para melhorar o uso de uma estrutura que prioriza a utilidade, você deve continuar praticando e aumentar seu conhecimento de CSS se ainda não tiver uma base sólida.

Você já usou Tailwind CSS ou outro framework CSS no passado? Compartilhe seus pensamentos na seção de comentários!