Artigo original: What is Tailwind CSS? A Beginner's Guide
Escrever CSS pode ser muito difícil. Não se discute. Eu entendo – pode ser frustrante definir suas próprias ideias ou os designs que você recebe de sua equipe de design.
Tenho certeza de que muitos de vocês passaram pelo mesmo incômodo ao menos algumas vezes em suas carreiras de desenvolvimento.
Bem, agora não precisa mais sofrer. É hora de aprender uma ferramenta interessante que diminui muito esse fardo. Não, não é o Bootstrap – o nome dela é Tailwind CSS.
Embora o Tailwind já exista há algum tempo, talvez você ainda não o tenha encontrado. Talvez você simplesmente não tenha ouvido falar sobre ele, ou não sabe se aprender uma nova tecnologia relacionada ao CSS realmente facilitará sua vida.
De fato, existem muitas maneiras de escrever CSS – como CSS3 puro, LESS, SCSS, Bootstrap, styled-components, Windi CSS e mais. Uma lista e tanto, não é?
Espero que este pequeno guia o ajude a entender o Tailwind CSS e seus benefícios para que você possa dizer: "É isso. É esse".
Bem, chega de bate-papo. Vamos mergulhar direto no Tailwind.
O que é Atomic CSS?
Antes de entrar no Tailwind CSS, vamos entender o que é Atomic CSS. De acordo com o CSS Tricks (site em inglês):
"Atomic CSS é a abordagem da arquitetura CSS que favorece classes pequenas e de propósito único com nomes baseados na função visual."
É como criar classes que supostamente têm um único propósito. Por exemplo, vamos fazer uma classe bg-blue com o seguinte CSS:
.bg-blue {
background-color: rgb(81, 191, 255);
}
Agora, se adicionarmos essa classe a uma tag <h1>, ela terá um fundo azul com a cor rgb(81, 191, 255), como você pode ver no código acima.
Aqui está o HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div><h1 class="bg-blue">Hello world!</h1></div>
</body>
</html>
Este HTML resultará em algo assim:
Agora, imagine escrever regras CSS de propósito único, tão úteis, e mantê-las em um arquivo CSS global. Eu sei que é um investimento de tempo, mas pense nisso – você poderá usar essas classes auxiliares de propósito único em qualquer lugar que desejar.
Você só precisa do seu arquivo HTML para consumir esse arquivo CSS global e pronto. Você também poderá usar combinações dessas classes auxiliares em uma única tag HTML.
Vamos ver outro exemplo?
Vamos criar um arquivo CSS com as seguintes regras:
.bg-blue {
background-color: rgb(81, 191, 255);
}
.bg-green {
background-color: rgb(81, 255, 90);
}
.text-underline {
text-decoration: underline;
}
.text-center {
text-align: center;
}
.font-weight-400 {
font-weight: 400;
}
e, em seguida, consumi-lo em nosso arquivo HTML da seguinte forma:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div><h1 class="bg-blue">Hello world 1</h1></div>
<div><h1 class="text-underline">Hello world 2</h1></div>
<div class="text-center">
<h1 class="bg-green font-weight-400 text-underline">Hello world 3</h1>
</div>
</body>
</html>
Isso gerará o seguinte resultado:
🗒️ Pontos a observar aqui:
- Combinação de várias classes auxiliares: veja como combinei várias classes auxiliares na linha 14 da tag
<h1>, nomeadasbg-green,font-weight-400etext-underline. Todas foram aplicadas no meu texto Hello world 3. - Reutilização de classes auxiliares: no exemplo acima, veja como a classe auxiliar
text-underlineé usada várias vezes nas linhas 12 e 14.
Veja como conseguimos adicionar estilos diferentes sem sair da página HTML. Bem, você pode dizer: "Ei, nós tivemos que escrever essas classes auxiliares ou utilitárias no arquivo CSS global... e quanto a isso?" Bem, eu entendo. Esse definitivamente foi o investimento inicial de tempo que tivemos que fazer para começar.
Claro, quem sabe quantas dessas classes auxiliares ou utilitárias de propósito único teríamos que fazer se quiséssemos seguir essa arquitetura Atomic CSS.
É aí que entra o Tailwind CSS. O conceito de Atomic CSS não é novo, mas o Tailwind CSS o leva a outro nível.
Tailwind CSS – um framework CSS visando a utilidade
O Tailwind CSS, segundo o próprio site da web é um "framework CSS visando a utilidade", que fornece várias dessas classes utilitárias, opinativas e de propósito único, que você pode usar diretamente dentro de sua marcação de texto para projetar um elemento.
Algumas das classes utilitárias que uso frequentemente hoje em dia são:
- flex: usado para aplicar o Flexbox a uma
<div> - items-center: para aplicar as propriedades do CSS
align-items: center;a uma<div> - rounded-full: para fazer uma imagem circular, e assim por diante.
Sério, não é possível listar todas elas porque existem muitas dessas classes de utilitários. A melhor parte, contudo, é que não precisamos escrever essas classes utilitárias e mantê-las em qualquer arquivo CSS global. Nós as pegamos diretamente do Tailwind.
Você pode obter uma lista de todas as classes utilitárias que o Tailwind tem a oferecer na página de documentação. Além disso, se você estiver trabalhando no VS Code, poderá instalar uma extensão chamada Tailwind CSS IntelliSense, que dará sugestões automáticas, enquanto você continua digitando as classes utilitárias, conforme mostrado na imagem abaixo.
Como configurar o Tailwind CSS
Existem várias maneiras de configurar o Tailwind CSS em seu projeto, todas mencionadas na documentação.
O Tailwind CSS funciona sem problemas com uma infinidade de estruturas como Next, React, Angular e muito mais – e até mesmo no HTML OG(Open Graph).
Para a demonstração prática abaixo, estou usando Tailwind CSS com uma aplicação do Next. Para configurar uma aplicação do Next com o Tailwind CSS diretamente, use o seguinte comando:
Com o npx:
npx create-next-app --example with-tailwindcss with-tailwindcss-app
ou com o yarn:
yarn create next-app --example with-tailwindcss with-tailwindcss-app
Uma vez que o projeto foi configurado, você pode começar a próxima etapa para criar um componente básico de cartão.
Mãos à obra
Vamos construir um componente de cartão em um projeto do Next.
// Arquivo Card.js
// a ser renderizado no index.js
import React from "react";
const Card = () => {
return (
<div className="relative w-96 m-3 cursor-pointer border-2 shadow-lg rounded-xl items-center">
{/* Imagem */}
<div className="flex h-28 bg-blue-700 rounded-xl items-center justify-center">
<h1 className="absolute mx-auto text-center right text-2xl text-white">
Image goes here
</h1>
</div>
{/* Descrição */}
<div className="p-2 border-b-2">
<h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
</h6>
</div>
{/* Stack de tecnologias utilizada */}
<div className="flex flex-wrap items-center m-2">
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#React
</span>
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#Redux
</span>
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#Javascript
</span>
</div>
{/* Links */}
<div className="flex flex-wrap items-center rounded-b-xl border-t-2 bg-white">
<button className="border rounded-2xl bg-blue-600 text-white shadow-sm p-1 px-2 m-2">
Go to Project
</button>
<button className="border-2 border-blue-600 rounded-2xl text-blue-600 shadow-sm p-1 px-2 m-2">
Github
</button>
</div>
</div>
);
};
export default Card;
Isso resulta no cartão a seguir, que é renderizado na interface do usuário:
Veja com que facilidade consigo estilizar o componente de cartão sem sair do arquivo Card.js. Não há a necessidade de escrever nenhum arquivo CSS extra.
Usando flex com a <div>, aplique a ela a regra de CSS display: flex;. Quer adicionar position: relative; em uma <div>? Adicione apenas relative na className e pronto.
Também podemos adicionar diferentes modificadores como hover, active, focus e assim por diante para renderizar condicionalmente classes utilitárias. É possível aplicar regras de CSS complexas como esta:
.some-class-name {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
Basta mencionar space-x-2 na tag <div>. Legal, não é?
Temos que mencionar esses estilos explicitamente em algum tipo de arquivo CSS global? Absolutamente, não! O Tailwind faz isso automaticamente por nós. Essa é a beleza do Tailwind.
Ainda não terminamos... há muitas outras vantagens. Vamos vê-las agora.
Vantagens do Tailwind CSS
O modo Just-In-Time (JIT) fornece tempos de construção extremamente rápidos
Antes do Tailwind v3, ele limpava todos os estilos para remover quaisquer estilos não utilizados, para que a compilação de produção permanecesse a menor possível.
De acordo com o Tailwind, a construção de produção costumava ficar entre 5 e 10 kB. Essa, porém, é a história em produção. Em um ambiente de desenvolvimento, o CSS pode ficar muito grande, especialmente se usarmos muitas configurações personalizadas.
Com a v3 e depois dela, o Tailwind lançou um novo recurso chamado compilador Just-in-Time. O compilador JIT evita compilar todo o CSS antecipadamente e compila apenas o CSS como e quando precisamos dele.
Isso resulta em tempos de construção extremamente rápidos em todos os ambientes. E como os estilos são gerados conforme precisamos deles, não há necessidade de limpar os estilos não utilizados. Isso significa que o CSS em todos os ambientes será o mesmo. Isso nos ajuda a nos livrar do medo de que qualquer CSS importante seja eliminado na produção.
É opinativo e flexível ao mesmo tempo
O Tailwind CSS é opinativo. Ele especifica algumas restrições quando se trata de estilo e, se você me perguntar, se isso é bom, eu diria que sim, pois nos ajuda a manter a parte do design para aqueles que realmente a entendem.
Basta olhar para uma das classes utilitárias para adicionar um box-shadow na sua <div> (fonte):
Como você pode ver, existem apenas 8 variantes de sombra que o Tailwind fornece. Existem valores predefinidos para deslocamento vertical e horizontal, desfoque, propagação, cor e opacidade. É por isso que o Tailwind é opinativo.
Ele tenta dar uma opinião sobre quais valores de propriedade escolher em quase todas as propriedades de estilo existentes. Acredite: na maioria dos casos, essas 8 variantes (para box-shadow) serão mais do que suficiente para criar uma ótima interface de usuário.
Por exemplo, no exemplo prático acima, usei shadow-lg na <div> pai principal, para obter aquela bela sombra de caixa externa.
Usar a mesma variante de uma classe de utilitário específica em diferentes áreas da interface do usuário também garante a uniformidade em toda a aplicação e resulta em uma melhor experiência do usuário.
Caso, no entanto, você precise de algum valor realmente personalizado para qualquer estilo em particular, pode obter isso adicionando um tema personalizado no tailwind.config.js. Por exemplo, para ter um shadow-3xl (o Tailwind não fornece shadow-3xl para usar diretamente), você pode adicionar as seguintes linhas no module.exports no tailwind.config.js:
module.exports = {
theme: {
extend: {
boxShadow: {
'3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
}
}
}
}
Agora, com o advento do JIT, você também pode usar um valor arbitrário entre colchetes [], como mostrado abaixo:
<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
// O resto do código vai aqui
</div>
O uso de valores arbitrários pode ser útil quando você precisar de um estilo específico em apenas alguns lugares. Neste caso, criar um tema para ele no tailwind.config.js pode parecer desnecessário.
Minhas considerações
Eu realmente espero ter conseguido fazer você entender o que é o Tailwind CSS e o que você pode fazer com ele.
O Tailwind é um framework do CSS que nos fornece classes utilitárias de propósito único que são, em sua maioria, opinativas e que nos ajudam a projetar nossas páginas da web diretamente de dentro de nossos arquivos de marcação ou .js/.jsx/.ts/.tsx.
Na minha opinião, o Tailwind é simples e fácil de entender. É verdade que pode levar algum tempo para pegar o jeito de todos os nomes de classes de utilitários, mas não se preocupe – você pode consultar a documentação sempre que ficar travado.
Para todos os iniciantes, que estão recém começando em sua jornada com o desenvolvimento para a web, é muito importante saber o que é o CSS3, antes mesmo de explorar o Tailwind (ou qualquer outro framework do CSS, como o Bootstrap, o Windi CSS e outros) .
Conclusão
Obrigado pela leitura! Eu realmente espero que você tenha gostado de ler sobre o Tailwind CSS neste artigo e que o tenha achado útil.
Considere compartilhá-lo com seus amigos. Eu ficarei muito grato, de verdade. Siga o autor no LinkedIn e no Twitter e fique ligado para ver mais conteúdos incríveis. Paz!
Links
- Site da web do autor (em inglês)
- Outros textos do autor (em inglês)