O que é Tailwind?

CSS de vento de cauda é uma estrutura CSS de “utilitário primeiro” que fornece um catálogo profundo de classes e ferramentas CSS que permitem que você comece a estilizar facilmente seu site ou aplicativo.

O objetivo subjacente é que, enquanto você cria seu projeto, não precisa lidar com estilos em cascata e se preocupar em como substituir o acúmulo de 10 seletores que assombra seu aplicativo nos últimos 2 anos.

Então, o que torna o Tailwind ótimo?

A solução do Taildwind é fornecer uma ampla variedade de classes CSS, cada uma com seu uso específico. Em vez de uma classe chamada .btn que é criado com vários atributos de CSS diretamente, no Tailwind, você pode aplicar várias classes como bg-blue-500 py-2 px-4 rounded para o elemento button ou crie um .btn classificar por aplicando classe de utilidade para esse seletor.

Enquanto o Tailwind tem muito mais a oferecer, vamos nos concentrar nesses princípios para este tutorial, então vamos nos aprofundar!

Parte 1: Adicionando CSS Tailwind a uma página HTML estática

Vamos começar aplicando o CSS Tailwind diretamente a uma página HTML estática. A esperança é que, concentrando-se no Tailwind e não no aplicativo, possamos entender melhor o que realmente está acontecendo com o framework.

Etapa 1: Criando uma nova página

Você pode começar criando um novo arquivo HTML. Para o conteúdo, você pode usar o que quiser, mas eu vou usar fillerama.io então o conteúdo do preenchimento é um pouco mais divertido.

Se você deseja simplificar esta etapa, basta copie o arquivo que eu criei para começar.

Siga junto com o commit!

Etapa 2: Adicionando CSS de vento de cauda via CDN

O vento de cauda normalmente recomenda que você instale npm para obter a funcionalidade completa, mas, novamente, estamos apenas tentando entender como isso funciona primeiro.

Então, vamos adicionar um link ao arquivo CDN no diretório do nosso documento:

Depois de salvar e recarregar a página, a primeira coisa que você notará é que todos os estilos foram removidos!

Isso é esperado. O vento de cauda inclui um conjunto de estilos de comprovação para corrigir inconsistências entre navegadores. Por um lado, eles incluem o popular normalize.css sobre os quais eles constroem com seus próprios estilos.

Mas vamos aprender como usar o Tailwind para adicionar de volta nossos estilos e configurar as coisas como queremos!

Siga junto com o commit!

Etapa 3: Usando o CSS Tailwind para adicionar estilos à sua página

Agora que instalamos o Tailwind, adicionamos a capacidade de usar sua enorme biblioteca de classes de utilitários que agora usaremos para adicionar estilos à nossa página.

Vamos começar adicionando margem a todos os parágrafos (

) e nossos elementos da lista (

,
) Podemos fazer isso adicionando o .my-5 classe para cada elemento da seguinte forma:

  Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along…
  Belligerent and numerous.

O nome da classe segue um padrão que você notará com o restante das classes utilitárias – .my-5 representa a margem (m) aplicada ao eixo y (y) com um valor de 5 que, no caso de Tailwind, utiliza rem, então o valor é 5rem.



Em seguida, vamos fazer com que nossos cabeçalhos pareçam com cabeçalhos reais. Começando com o nosso h1 tag, vamos adicionar:

Aqui está o que está acontecendo:

• text-2xl: defina o tamanho do texto (tamanho da fonte) para 2xl. Em Tailwind, esse 2xl será igual a 1,5rem
• font-bold: defina o peso do texto (peso da fonte) para negrito
• mt-8: Igual a my-5, isso definirá a margem superior
  

  Aqui está o que estamos adicionando:

  • list-disc: defina o tipo de estilo de lista como disco (os marcadores em cada item de linha)
  • list-inside: define a posição dos marcadores da lista em relação aos itens da lista e a própria lista com posição no estilo da lista como dentro
  • my-5: defina a margem do eixo y como 5rem
  • pl-2: defina o preenchimento esquerdo para 2rem

  Em seguida, podemos aplicar exatamente as mesmas classes à nossa lista ordenada (

  ), exceto em vez de list-disc, queremos mudar nosso tipo de estilo para list-decimal, para que possamos ver os números, pois é uma lista ordenada.

  E nós temos nossas listas!

  

  Finalmente, vamos tornar nosso conteúdo um pouco mais fácil de ler, definindo uma largura máxima e centralizando o conteúdo. No , adicione o seguinte:

  / Nota: Normalmente você não gostaria de aplicar essas classes ao método Em vez disso, você pode agrupar todo o seu conteúdo com um

  , mas como estamos apenas tentando ter uma idéia de como isso funciona, seguiremos com isso. Sinta-se livre para adicionar o

  marque essas classes, se preferir! /

  E com isso, temos nossa página!

  

  Siga junto com o commit!

  Etapa 4: Adicionando um botão e outros componentes

  Para a última parte do nosso exemplo estático, vamos adicionar um botão.

  O truque do Tailwind é que eles intencionalmente não fornecem classes de componentes pré-definidas, com a idéia de que provavelmente as pessoas precisariam substituir esses componentes de qualquer maneira para fazê-las parecer como queriam.

  Então isso significa que teremos que criar nossos próprios usando as classes de utilitário!

  Primeiro, vamos adicionar um novo botão. Em algum lugar da página, adicione o seguinte snippet. Vou adicioná-lo logo abaixo do primeiro parágrafo (

  ) tag:

  Party with Slurm!
  

  

  Você notará, assim como todos os outros elementos, que não tem estilo; no entanto, se tentar clicar nele, perceberá que ainda possui as ações de clique. Então, vamos fazer parecer um botão.

  Vamos adicionar as seguintes classes:

  
    Party with Slurm!
  
  

  Aqui está um detalhamento do que está acontecendo:

  • text-white: estamos definindo a cor do texto em branco
  • font-bold: defina o peso do texto para negrito (peso da fonte)
  • bg-purple-700: defina a cor de fundo do botão como roxo com um tom de 700. O 700 é relativo às outras cores definidas como roxo, você pode encontrar esses valores em suas página de documentação da paleta
  • hover:bg-purple-800: quando alguém passa o mouse sobre o botão, defina a cor do plano de fundo como tom roxo 800. Tailwind fornece essas classes auxiliares que permitem definir facilmente estilos interativos com coisas como pairar, foco e modificadores ativos
  • py-2: defina o preenchimento do eixo y como 2rem
  • px-4: defina o preenchimento do eixo x como 4rem
  • rounded: arredonda os cantos do elemento definindo o raio da borda. Com vento de cauda, ​​ele define o valor do raio da borda como 0,25rem

  E com tudo isso, temos o nosso botão!

  

  Você pode aplicar essa metodologia a qualquer outro componente que queira criar. Embora seja um processo manual, descobriremos como podemos facilitar esse processo ao criar projetos mais dinâmicos como os baseados no React.

  Siga junto com o commit!

  Parte 2: Adicionando CSS de vento de cauda a um aplicativo React

  Para mais casos de uso do mundo real, adicionaremos o Tailwind CSS a um aplicativo criado com Criar aplicativo React.

  Primeiro, percorreremos as etapas necessárias para adicionar vento de popa ao seu projeto usando uma nova instalação do Create React App. Em seguida, usaremos o conteúdo do nosso último exemplo para recriá-lo no React.

  Etapa 1: ativar um novo aplicativo React

  Não vou detalhar muito esse passo. A essência é que vamos iniciar um novo aplicativo React usando o Create React App.

  Para começar, você pode acompanhar com as instruções da documentação oficial do React:

  https://reactjs.org/docs/create-a-new-react-app.html

  E uma vez iniciado o servidor de desenvolvimento, você deverá ver um aplicativo!

  

  Por fim, vamos migrar todo o nosso conteúdo antigo para o nosso aplicativo. Para fazer isso, copie tudo dentro do tag do nosso exemplo estático e cole-o dentro do wrapper

  no novo projeto React.

  

  Em seguida, mude tudo class=" atributos do conteúdo em que colamos className=" para usar os atributos React adequados:

  

  E, por fim, substitua o className App no nosso invólucro

  para as classes que usamos em nossa estática .

  

  Depois de salvar as alterações e fazer o backup do servidor, ele parecerá enganosamente aceitável.

  

  O React inclui alguns estilos básicos, portanto, embora pareça bom, ainda não estamos usando o Tailwind. Então, vamos começar instalando-o!

  Siga junto com o commit!

  Etapa 2: instalando o Tailwind no seu aplicativo React

  É necessário seguir algumas etapas para que o Tailwind funcione em nosso aplicativo. Siga estas etapas com cuidado para garantir que esteja configurado corretamente.

  Primeiro, vamos adicionar nossas dependências:

  yarn add tailwindcss postcss-cli autoprefixer
  # or
  npm install tailwindcss postcss-cli autoprefixer
  

  Por documentação do Tailwind, precisamos processar nossos estilos para que possam ser adicionados corretamente ao nosso pipeline. Então, acima, estamos adicionando:

  • tailwindcss: o pacote principal do Tailwind
  • postcss-cli: O Create React App já usa o postcss, mas precisamos configurar o Tailwind para fazer parte desse processo de compilação e executar seu próprio processamento
  • autoprefixer: Tailwind não inclui prefixos de fornecedores, portanto, queremos adicionar o autoprefixer para lidar com isso para nós. Isso é executado como parte da nossa configuração do postcss

  Também vamos adicionar duas dependências de desenvolvimento que facilitam o trabalho com nosso código:

  yarn add concurrently chokidar-cli -D
  # or
  npm install concurrently chokidar-cli --save-dev
  

  • simultaneamente: um pacote que nos permite configurar a capacidade de executar vários comandos ao mesmo tempo. Isso é útil, pois precisamos assistir aos estilos e ao aplicativo React.
  • chokidar-cli: vamos assistir arquivos e executar um comando quando alterado. Usaremos isso para assistir nosso arquivo CSS e executar o processo de construção do CSS no cahnge

  Em seguida, vamos configurar o postcss, então crie um novo arquivo na raiz do seu projeto chamado postcss.config.js e inclua o seguinte:

  // Inside postcss.config.js
  module.exports = {
      plugins: [
          require('tailwindcss'),
          require('autoprefixer')
      ],
  };
  

  Isso adicionará os plugins Tailwindcss e Autoprefixer à nossa configuração do postcss.

  Com nossa configuração, precisamos incluí-la como parte dos processos de compilação e observação. Dentro package.json, adicione o seguinte às definições no seu scripts propriedade:

  "build:css": "tailwind build src/App.css -o src/index.css",
  "watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",
  

  Ademais, modifique o start e build scripts para incluir agora esses comandos:

  "start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'",
  "build": "npm run build:css && react-scripts build",
  

  Com nossa configuração pronta, vamos tentar nossos estilos de volta para onde estavam quando paramos do exemplo estático.

  Dentro de App.css , substitua todo o conteúdo por:

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

  Isso vai importar os estilos base, componentes e classes de utilitários do Tailwind que permitem que o Tailwind funcione conforme o esperado.

  Também podemos remover o App.css importar do nosso App.js arquivo porque agora está sendo injetado diretamente em nosso index.css Arquivo. Então remova esta linha:

  import './App.css';
  

  Quando terminar, você poderá iniciar o backup do servidor de desenvolvimento! Se já foi iniciado, reinicie-o para que todas as alterações na configuração entrem em vigor.

  E agora a página deve ser exatamente igual ao nosso exemplo estático!

  

  Siga junto com o commit!

  Etapa 3: Criando uma nova classe de componente de botão com Tailwind

  O Tailwind não é fornecido com classes de componentes pré-preparadas, mas facilita a criação delas!

  Vamos usar nosso botão que já criamos como um exemplo de criação de um novo componente. Vamos criar uma nova classe btn bem como um modificador de cores btn-purple para conseguir isso.

  A primeira coisa que queremos fazer é abrir nosso arquivo App.css, onde criaremos nossa nova classe. Dentro desse arquivo, vamos adicionar:

  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  

  Se você se lembra do nosso HTML, já estamos incluindo essas mesmas classes no nosso elemento. Tailwind, vamos “aplicar” ou incluir os estilos que compõem essas classes de utilitários para outra classe; nesse caso, o .btn classe.

  E agora que estamos criando essa classe, vamos aplicá-la ao nosso botão:

  Party with Slurm!

  E se abrirmos nossa página, podemos ver que nosso botão ainda parece o mesmo. Se inspecionarmos o elemento, podemos ver nosso novo .btn classe gerada com esses estilos.

  

  Em seguida, vamos criar um modificador de cores. Semelhante ao que acabamos de fazer, adicionaremos as seguintes regras:

  .btn-purple {
    @apply bg-purple-700 text-white;
  }
  
  .btn-purple:hover {
    @apply bg-purple-800;
  }
  

  Aqui, estamos adicionando nossa cor de plano de fundo e cor de texto à nossa classe de botão. Também aplicamos uma cor mais escura ao botão quando alguém passa o mouse sobre o botão.

  Também queremos atualizar nosso botão HTML para incluir nossa nova classe e remover as que acabamos de aplicar:

  
    Party with Slurm!
  
  

  E com essa mudança, ainda podemos ver que nada mudou e temos nossa nova classe de botões!

  

  Siga junto com o commit!

  Aplicando esses conceitos a mais componentes

  Com essa explicação, aprendemos como criar uma nova classe de componente usando a diretiva de aplicação Tailwind. Isso nos permitiu criar classes reutilizáveis ​​que representam um componente como um botão.

  Podemos aplicar isso a qualquer número de componentes em nosso sistema de design. Por exemplo, se quiséssemos sempre mostrar nossas listas da maneira como as configuramos aqui, poderíamos criar um .list-ul classe que representava uma lista não ordenada com os utilitários Tailwind list-disc list-inside my-5 pl-2 aplicado.

  Quais dicas e truques você gosta de usar com Tailwind?

  Compartilhe comigo no Twitter!