À medida que você avança como desenvolvedor, é mais provável que você use tecnologias que o ajudem a fazer mais escrevendo menos código. Um framework de frontend sólida como o Tailwind CSS é uma maneira de se conseguir isso.
Neste artigo, vamos aprender sobre o Tailwind CSS – um framework CSS que auxilia na construção e design de páginas web. Vamos começar explicando como instalar e integrar o Tailwind CSS em seu projeto, ver algumas aplicações práticas e também como você pode criar seus estilos e plugins personalizados.
Entusiasmado? Vamos começar!
Confira nosso guia em vídeo sobre como usar o Tailwind CSS para criar sites:
O que é Tailwind CSS?
Tailwind CSS é um framework CSS (Cascading Style Sheets) com classes predefinidas que você pode usar para construir e projetar páginas web diretamente na sua marcação. Ele permite que você escreva CSS em seu HTML na forma de classes pré-definidas.
Nós definiremos 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 é framework?
Como um termo de programação geral, um framework é uma ferramenta que fornece componentes reutilizáveis e prontos para uso construídos a partir das características de uma ferramenta já existente. O propósito geral da criação de frameworks é aumentar a velocidade de desenvolvimento, fazendo menos trabalho.
Agora que nós estabelecemos o significado de um framework, ela deve ajudá-lo a entender que o Tailwind CSS é uma ferramenta construída sobre as características de CSS. Todas as funcionalidades do framework foram derivadas de estilos CSS compostos como classes.
O que significa Framework Utility-First CSS?
Quando dizemos Utility-First CSS, nos referimos a classes em nosso markup (HTML) com funcionalidades pré-definidas. Isto implica que você só tem que escrever uma classe com estilos pré-definidos ligados a ela, e esses estilos serão aplicados ao elemento.
Em um caso em que você esteja trabalhando com Vanilla CSS (CSS sem qualquer framework ou biblioteca), você primeiro daria um nome de classe ao seu elemento e depois anexaria diferentes propriedades e valores a essa classe, que, por sua vez, aplicariam o estilo ao seu elemento.
Nós lhe mostraremos um exemplo. Aqui, vamos criar um botão com cantos arredondados e um texto que diz “Click me” Este é o aspecto do botão:
Primeiro vamos fazer isso usando o Vanilla CSS e depois usando as classes de utilidades disponíveis no CSS Tailwind.
Com Vanilla CSS
<button class="btn">Click me</button>Nós demos etiquetas de botão à classe btn, que será estilizada usando uma folha de estilo externa. Ou seja:
.btn {
background-color: #000;
color: #fff;
padding: 8px;
border: none;
border-radius: 4px;
}Com vento de cauda CSS
<button class="bg-black text-white p-2 rounded">Click me</button>Tudo isso é necessário para alcançar o mesmo efeito que o exemplo com o Vanilla CSS. Nenhuma folha de estilos externa onde você tem que escrever os estilos foi criada porque cada nome de classe que usamos já tem um estilo pré-definido.
Pré-requisitos para usar o CSS Tailwind
Antes de usar o Tailwind CSS, há alguns pré-requisitos que você deve considerar a reunião para usar as características da estrutura sem dificuldades. Aqui estão alguns deles:
- Bom conhecimento de HTML, sua framework e como ela 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 o Tailwind CSS em projetos web frontend, 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 o Tailwind CSS:
- Processo de desenvolvimento mais rápido
- Ajuda você a praticar mais o seu CSS, pois as utilidades são similares
- Todas as utilidades e componentes são facilmente personalizáveis
- O tamanho total do arquivo para produção é geralmente pequeno
- Fácil de aprender se você já conhece o CSS
- Boa documentação para o aprendizado
Algumas das desvantagens de usar o Tailwind CSS incluem:
- Sua marcação pode parecer desorganizada para grandes projetos, porque todos os estilos estão nos arquivos HTML.
- Não é fácil de aprender se você não entende bem o CSS.
- Você é forçado a construir tudo do zero, incluindo seus elementos de entrada. Quando você instala o Tailwind CSS, ele remove todos os estilos padrão de CSS.
- CSS Tailwind não é a melhor opção se você estiver procurando minimizar o tempo gasto no desenvolvimento do frontend do seu website e principalmente focando na lógica backend.
Quando usar o Tailwind CSS
O 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 através de 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 o Tailwind CSS se você estiver procurando usar um framework que seja facilmente configurável porque ele não força você a usar componentes (barras de navegação, botões, formulários, etc.) da mesma forma o tempo todo; você pode escolher como seus componentes devem se parecer. Mas você nunca deve usar o Tailwind se você não tiver aprendido e praticado CSS.
Semelhanças e diferenças entre o Tailwind CSS e outros frameworks CSS
Aqui estão algumas semelhanças:
- Eles ajudam você a fazer o trabalho mais rápido.
- Eles vêm com classes pré-definidas.
- Elas foram construídas sobre as regras do CSS.
- Eles são fáceis de aprender e usar com um conhecimento funcional do CSS.
Agora vamos olhar para algumas das diferenças:
- O Tailwind CSS é diferente da maioria dos frameworks porque você tem que criar seus componentes. Por exemplo, Bootstrap tem componentes como barras de navegação, botões e assim por diante, mas com Tailwind, você tem que construir tudo isso você mesmo.
- 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.
- O conhecimento profundo do CSS é necessário para usar o Tailwind. Escrever nomes de classe não é suficiente, já que você deve combiná-los como se você estivesse escrevendo Vanilla CSS para alcançar 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 em seu projeto, certifique-se disso:
- Você tem o Node.js instalado em seu computador para fazer uso do gerenciador de pacotes Node (npm) no terminal.
- Seu projeto está todo configurado com seus arquivos criados.
Esta é a aparência da nossa estrutura de projeto no momento:
-Tailwind-tutorial
-public
-index.html
-styles.css
-src
-styles.cssEm seguida, inicie um terminal para o seu projeto e execute os seguintes comandos:
npm install -D tailwindcssO comando acima instalará o framework Tailwind CSS como uma dependência. Em seguida, gere seu arquivo tailwind.config.js executando o comando abaixo:
npx tailwindcss initO arquivo tailwind.config.js estará vazio quando criado, então nós temos que 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 purgue/remova qualquer estilo não utilizado durante o tempo de construção.
A próxima coisa a fazer é adicionar as diretrizes “@tailwind” ao seu arquivo CSS na pasta src – aqui é onde Tailwind gera todos os seus estilos de utilidade pré-definidos para você:
@tailwind base;
@tailwind components;
@tailwind utilities;A última coisa a fazer é iniciar o processo de construção executando este comando no seu terminal:
npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watchNo código acima, estamos dizendo ao Tailwind que nosso arquivo de entrada é a folha de estilo na pasta src e que qualquer estilo que nós usamos tem que ser construído no arquivo de saída na pasta pública. --watch permite que o Tailwind assista seu arquivo para mudanças para um processo de construção automática; omitir isso significa que nós temos que executar esse script toda vez que queremos construir nosso código e ver a saída desejada.
Usando CSS Tailwind
Agora que instalamos e montamos o Tailwind CSS para nosso projeto, vamos ver alguns exemplos para entender completamente sua aplicação.
Exemplo Flexbox
Para usar flex no Tailwind CSS, você precisa adicionar uma classe de flex e, em seguida, a direção dos itens flex:
<div class="flex flex-row">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>
Usando flex-row-reverse irá reverter a ordem na qual os botões aparecem.
flex-col os empilha uns sobre os outros. Aqui está um exemplo:
<div class="flex flex-col">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>
Assim como o exemplo anterior, flex-col-reverse reverte a ordem.
Exemplo de grade
Ao especificar colunas e linhas no sistema de grade, nós adotamos uma abordagem diferente, passando em um número que irá determinar como os elementos irão ocupar 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
O Tailwind CSS vem com um monte de cores pré-definidos. Cada cor tem um conjunto de variações diferentes, com a variação mais clara sendo 50 e a mais escura sendo 900.
Aqui está uma imagem de múltiplas cores e seus códigos HTML hexadecimais para ilustrar isto
Vamos dar 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>Esta sintaxe é a mesma para todas as cores em Tailwind, exceto para preto e branco, que são escritas da mesma maneira, mas sem o uso de números bg-black e bg-white.
Para adicionar a cor do texto, você usa a classe text-{color}:
<p class="text-yellow-600">Hello World</p>Padding
O Tailwind CSS já tem um sistema de design que o ajudaria a manter uma escala consistente em todos os seus designs. Tudo que você tem que saber é a sintaxe para aplicar cada utilidade.
A seguir estão as utilidades para adicionar padding aos seus elementos:
pdenota o preenchimento de todo o elemento.pydenota padding padding-top e padding-bottom.pxdenota padding-esquerda e padding-direita.ptdenota padding-top.prdenota padding-direita.pbdenota padding-baixo.pldenota padding-esquerda
Para aplicá-los aos seus elementos, você teria que usar os números apropriados fornecidos pelo Tailwind – um pouco parecidos com os 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
As utilidades pré-definidas para padding e margem são muito similares. Você tem que substituir o p por um m:
mmymxmtmrmbml
Como criar um plugin com o Tailwind CSS
Mesmo que o Tailwind CSS tenha muitas utilidades e sistemas de projeto já construídos para você, ainda é possível que você tenha uma funcionalidade particular que você gostaria de adicionar para estender o que o Tailwind pode ser usado. O Tailwind CSS nos permite fazer isso através da criação de um plugin.
Vamos sujar nossas 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. Vamos fazer 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");Então nós continuamos a criar nossos plugins na matriz de plugins:
plugins: [
plugin(function ({ addUtilities }) {
const newUtilities = {
".bg-aqua": { background: "aqua" },
".rotate-150deg": {
transform: "rotateX(150deg)",
},
};
addUtilities(newUtilities);
}),
],Você pode ter que reexecutar o script de construção depois de fazer seu plugin.
Agora que os plugins estão prontos, nós 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 a 150º no eixo X.
Resumo
Frameworks são uma opção inestimável quando se trata de acelerar o seu fluxo de trabalho. Eles ajudam você a construir páginas web com boa aparência e profissionais, mantendo a consistência no design. Tailwind CSS fornece muitas classes CSS utilitárias para ajudar a levar o seu web design e desenvolvimento para o próximo nível.
Este artigo nos ensinou o que é Tailwind CSS e o que faz dele um framework. Nós então olhamos para o processo de instalação e vimos alguns exemplos que mostraram como poderíamos criar nossos plugins personalizados para estender a funcionalidade existente.
Se você seguiu até este ponto, então agora você tem um entendimento básico, mas sólido, de como o Tailwind funciona. Para melhorar o uso de tal framework de utilidades, porém, você deve continuar praticando e aumentar seu conhecimento do CSS se você ainda não tem uma base sólida.
Você já usou o Tailwind CSS ou outro framework CSS no passado? Compartilhe suas ideias na seção de comentários!
Ihechikara é um desenvolvedor de software e escritor técnico. Ele gosta de escrever artigos sobre tecnologias web, programação e tópicos relacionados à TI. Conecte-se com Ihechikara no X.
Deixe um comentário