TailwindCSS é uma impressionante biblioteca CSS de primeiro utilitário, para criar belos layouts com CSS menos personalizado.

Há uma boa chance que você já ouviu falar sobre Tailwind. Mas você já tentou usá-lo?

Neste artigo, vou compartilhar o que torna o Tailwind diferente de outras bibliotecas de componentes que eu conheço. E discutirei por que você deve começar a usá-lo.

Observe que tudo aqui é minha opinião. Não estou dizendo que usei todas as bibliotecas de componentes do mundo, lol.

Antes de TailwindCSS

… havia bibliotecas de componentes como Bootstrap e Material UI, para citar alguns. Essas bibliotecas vêm com um conjunto de componentes predefinidos. Por exemplo, o mais comum (ou ouvido falar) é provavelmente PrimaryButton.

Essas bibliotecas reduzem o incômodo de projetar elementos do zero com CSS. A maioria dessas bibliotecas também faz um trabalho incrível ao tornar os componentes personalizáveis ​​pelo usuário, para que eles não precisem seguir as decisões do criador.

No entanto, essa capacidade de personalização na maioria das vezes envolve substituição. Por exemplo, criando novas classes para substituir os estilos existentes fornecidos pela biblioteca.

Esse não é um grande problema em si (dependendo do usuário, para mim), mas você ainda precisa seguir o tipo de fluxo “Eu gosto da maneira como isso é estilizado? Não. Deixe-me substituí-lo”.

Alguns desenvolvedores podem ver esses componentes já fabricados exatamente como eles precisam. Mas os criadores nem sempre conseguem criar algo perfeito para todos os usuários. Felizmente, como afirmado anteriormente, eles fazem um ótimo trabalho ao tornar os componentes personalizáveis.

Tailwind é uma biblioteca CSS de utilidade. Isso significa que eles estão focados em utilitários. Eles fornecem classes de utilidade, como bordas, cores, cores de fundo e assim por diante. Eles não definem necessariamente a aparência do seu componente. Você decide que usando diferentes classes que eles fornecem.

É por isso que eu amo Tailwind. Claro, a substituição de estilos ainda é possível aqui, mas isso é muito raro. A equipe maravilhosa por trás do produto criou muitas classes para diferentes necessidades. Sem a necessidade de substituir, você pode configurar os estilos padrão que deseja que a biblioteca use no arquivo de configuração. Muito impressionante né?

Se algum desses termos não fizer sentido para você agora, não se preocupe. Entraremos em mais detalhes à medida que prosseguimos com o artigo.

Exemplos de classes utitlity

Antes de começarmos a usar o TailWindCSS, deixe-me mostrar algumas classes que tornam a ferramenta incrível.

  • rounded: adiciona um border-radius de 0,25rem para um elemento.
  • text-gray-400: adiciona uma cor cinza claro (#cbd5e0) 300 adiciona algo mais leve e 500, algo mais escuro.
  • bg-gray-100: adiciona um cinza claro (#f7fafc) cor de fundo.
  • md:text-gray-100: adiciona uma consulta de mídia a um elemento de modo que as larguras de tela maiores ou iguais à tela média (768px por padrão) apliquem um cinza muito claro (#f7fafc) para o elemento Sim, sim?
  • hover:underline: adiciona um sublinhado a um texto quando passa o mouse.
  • xs:text-lg: igual a md.., isso aplica uma consulta de mídia a um elemento, de modo que o tamanho da fonte 1.125rem (por padrão) seja usado para um elemento quando a largura da tela for maior ou igual à tela pequena extra (640px por padrão).
  • mt-20: aplica um margin-top de 5rem para um elemento.
  • awesome-responsive: ok, isso não existe 😜

Todas essas opções também são personalizáveis, é claro. Veremos isso mais adiante neste artigo.

Como visto nas classes, eles não determinam (por si só) a aparência final de um elemento ou o layout de uma página. É a combinação deles por você, o desenvolvedor, que determina isso. Isso oferece controle total sem a necessidade de substituição.

Neste ponto, quero acreditar que você acha o TailWindCSS impressionante, então vamos começar a usá-lo.

Instalação e configuração

Sua documentação de instalação explica o processo de instalação em detalhes. Por uma questão de integridade, vou compartilhar as etapas de instalação aqui.

1. Instale o pacote com npm

npm install tailwindcss

2. Adicione Tailwind ao seu CSS

@tailwind base;@tailwind components;@tailwind utilities;h1 {  color: purple;}

@tailwind não é uma sintaxe CSS válida. Porém, o vento de cauda usa essas diretivas (como são chamadas) para gerar o CSS incorporado. h1 também será adicionado à folha de estilo como está.

h1 não é obrigatório. Eu estava tentando mostrar que qualquer outra coisa pode ser adicionada.

3. Crie seu arquivo de configuração

Esta etapa é opcional, mas permite especificar alguns valores padrão. Com essa configuração, o vento de cauda gera o CSS certo. Lembre-se de que eu disse anteriormente que a substituição seria mínima, pois o Tailwind permite que você configure seus estilos padrão.

Para criar seu arquivo de configuração, faça o seguinte:

npx tailwindcss init

npx porque o vento de cauda não foi instalado globalmente. Dessa forma, o pacote instalado local é usado.

O código acima criará um arquivo de configuração de modelo semelhante a este:

module.exports = {  purge: [],  theme: {    extend: {},  },final  variants: {},  plugins: [],}

Esta documentação explica como configurar o arquivo.

4. Usando Tailwind com PostCSS

PostCSS ajuda o processo de criação da folha de estilo do vento de cauda a gerar o código CSS correto. Na tua postcss.config.js arquivo, adicione este:

module.exports = {  plugins: [    // ...    require('tailwindcss'),    require('autoprefixer'),    // ...  ]}

autoprefixer também é adicionado (um plugin do PostCSS) para adicionar prefixos de fornecedores para propriedades.

Para criar seu css, execute o seguinte:

npx postcss tailwind.css -o public/style.css

Isso pega o arquivo tailwind.css (com as diretivas) e gera o conteúdo processado para a folha de estilo pública fornecida.

Agora você está pronto para usar o Tailwind.

Como usar o Tailwind no seu projeto

Com a folha de estilo pública preenchida, todas as páginas vinculadas à folha de estilo podem usar os estilos. Um exemplo é:

<div  className="flex justify-center mt-10 items-center">  <h1 className="text-xl md:text-4xl">    Hello  </h1>  <button    className="bg-red-300 p-2 rounded mx-20 hover:bg-red-600 hover:text-white"  >    Click me!  </button>  <a    href="https://google.com"    className="underline font-bold"  >    Google  </a></div>

Aqui está o que as classes estão fazendo pelos elementos:

  • flex – display: flex.
  • justify-center – justify-content: center.
  • mt-10 – margin-top: 2.5rem
  • items-center – align-items: center
  • text-xl – font-size: 1.25rem
  • md:text-xl – md significa tamanho médio. O padrão é 768px, mas você pode alterar isso no arquivo de configuração.

Aqui está o que a turma faz por você:

  @media only screen and (min-width:768px) {    element {      font-size: 1.25rem;    }  }
  • bg-red-300 – background-color: #feb2b2
  • rounded – border-radius: 0.25rem
  • mx-20 – margin-left: 5rem e margin-right: 5rem
  • hover:bg-red-600 – aplica uma cor de fundo de #e53e3e em pseudo estado pairar.
  • hover:text-white – aplica uma cor branca ao pseudo estado pairar.
  • underline: text-decoration: underline
  • font-bold: font-weight: bold

Aqui está o resultado para uma tela maior que 768px:

Resultado do código de exemplo para o tamanho da tela maior que 768px

e para uma tela com menos de 768 px:
Resultado do código de exemplo para o tamanho da tela menor que 768px

Observe a diferença no h1 elemento?

Este artigo não pode conter todos os recursos (ou mesmo os mais especiais) do Tailwind. Você pode comece daqui aprender mais.

Embrulhar

Essa é uma introdução ao belo Tailwind!

Em resumo, o TailwindCSS não define a aparência do seu componente. Você define isso combinando várias classes.

Eu, pessoalmente, adoro o TailwindCSS, porque me dá a sensação de CSS baunilha (eu amo o meu CSS baunilha) e, ao mesmo tempo, facilita as coisas para mim.

Embora abstraia os estilos para mim, não estou totalmente inconsciente do que está acontecendo. Por exemplo, com PrimaryButton, Não conheço os preenchimentos e cores que compõem esse componente. Mas com mt-10, Eu entendo que é simplesmente margin-top:2.5rem.

Se você tiver alguma dúvida ou contribuição para este artigo, poderá me encontrar no aplicativo de pássaro



Apaixonado por tecnologia e inovação, traz notícias do seguimento que atua com paixão há mais de 15 anos.