Tailwind surgiu em 2017, sobreviveu o hype das novas tecnologias e hoje está presente em muitos projetos e na instalação padrão de frameworks, como o NextJS. TailwindCSS torna a criação de componentes UI mais simples, rápido e agradável.

distracted boyfriend meme

Eu me tornei um evangelizador de Tailwind, por isso gostaria compartilhar as principais funcionalidades e como utilizo no meu dia a dia.

Nesse blog post estarei falando sobre os seguintes temas:

Para mais informações sobre instalação, configuração, por favor, verifque a documentação oficial de Tailwind.

Como TailwindCSS Funciona

Tailwin utiliza classes do html para aplicar estilos do CSS. Por exemplo, podemos definir a cor, tamanho e line-height de um texto da seguinte maneira com Tailwind.

<p class="text-red-500 text-base">Hello, World!</p>

Enquanto que com CSS puro, teriamos que criar uma classe e usa-la no elemento.

.text {
    color: red;
    font-size: 12px;
    line-height: 18px;
}

<p class="text">Hello, World!</p>

E com styled-components, teriamos que exportar um componente, importa-lo e usa-lo. Normalmente esse elemento estaria em um arquivo separado.

export const Text = styled.p`
    color: red;
    font-size: 12px;
    line-height: 18px;
`;

import * as Styles from './styles.js';
// ...
<Styles.Text>Hello, World!</Styles.Text>

Como você pode ver, podemos ter o mesmo resultado escrevendo muito menos código com tailwind.

Classes Utilitárias

No começo leva um tempo para decorar as classes mas elas seguem um padrão e com o tempo, se torna natural. Na documentação oficial tem a lista de todas as classes mas as mais usadas são:

  • w-x - Width
  • h-x - Height
  • p-x - Padding
  • m-x - Margin
  • mb-x - Margin-bottom
  • mt-x - Margin-top
  • ml-x - Margin-left
  • mr-x - Margin-right
  • px-x - Padding-left & padding-right
  • my-x - Margin-top & margin-bottom
  • text-x - Font-size & color
  • leading-x - Line-height
  • bg-x - Background-color
  • rounded - Rorder-radius
  • flex | block | hidden | grid - display: flex | block | none | grid

Leia mais na documentação oficial

Eu recomendo muito a extensão do VSCode Tailwind CSS IntelliSense que sugere e mostra os valores de todas as classes enquanto você digita.

VSCode Tailwind CSS IntelliSense extension

Customizando um tema

Tailwind vem com um tema padrão, mas é possível customizar esse tema para atender as necessidades do seu projeto.

Para isso, basta criar um arquivo tailwind.config.js na raiz do projeto e definir as propriedades que você deseja customizar.

module.exports = {
  theme: {
    extend: {
      colors: {
        'blue': '#1fb6ff',
        'green': '#13ce66',
        'gray-dark': '#273444',
      },
      spacing: {
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Leia na documentação oficial

Propriedades Customizadas

O tema do Tailwind tem uma variação muito grande propriedades e estilos, elas provavelmente atenderam as especificações do design.

Mas se por acaso você precisar de uma propriedade que não exista no seu tema, você pode definir um valor diferente usando -[x], por exemplo.

<p class="text-[red] text-[100px] w-[50%]">Hello, World!</p>

Para propriedas com espaço, você pode usar underline _ para separar os valores.

<p class="w-[calc(100%_+_10px)] shadow-[0_35px_60px_-15px_#333]">Hello, World!</p>

Leia mais na documentação oficial

Usando Media Queries

Para utilizar breakpoints, vc pode usar os prefixos sm:, md:, lg: e xl:.

<p class="text-red-500 sm:text-blue-500 md:text-green-500 lg:text-purple-500 xl:text-yellow-500">Hello, World!</p>

Para alterar os tamanhos dos breakpoints, basta alterar a propriedade screens no arquivo tailwind.config.js.

module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}

Leia na documentação oficial

Hover, actived, disabled e outros estados

Tailwind também utiliza prefixos para estilizar um elemento, dependendo do seu estado, como hover:, focus:, active: e disabled:.

<button class="bg-blue-500 hover:bg-green-500 disabled:bg-slate-600">Click here</button>

Leia mais na documentação oficial

Usando !important

Para usar a propriedade !important no CSS, basta adicionar o prefixo ! antes da classe.

<p class="!mb-0">Hello, World</p> <!-- margin-bottom: 0 !important; --->

Leia mais na documentação oficial

Usando Valores Negativos

Para usar valores negativos, basta usar o prefixo - antes da classe.

<p class="-mb-4">Hello, World</p> <!-- margin-bottom: -1rem; --->

Leia mais na documentação oficial

Acessando Primeiro e Último Elemento

Ao invés de usar os seletores :last-of-type, :first-of-type para customizar o primeiro ou último de um grupo de elementos irmãos hierarquicos, basta usar os prefixos first: e last:.

<p class="text-red-600 last:text-blue-600">...<p>
<p class="text-red-600 last:text-blue-600">...<p>
<p class="text-red-600 last:text-blue-600">...<p>

Isso é muito útil em loops.

<ul>
    {#each people as person}
       <li class="mb-10 last:mb-0">...<li>
    {/each}
<ul>

Leia mais na documentação oficial

Elementos Aninhados

Para aplicar o estilo em um elemento filho, basta usar o prefixo &> dentro de colchetes.

<div class="text-blue-700 hover:[&>.text]:text-red-700 ">
    <p>I'll not be red on hover.</p>
    <p class="text">I'll be red on hover.</p>
</div>

Leia mais na documentação oficial

Peer

Para estilizar um elemento dependendo do estado do seu irmão hierarquico, basta usar a classe e prefixo peer.

<input type="email" class="peer"/>
<p class="invisible peer-invalid:visible text-pink-600">
    Please provide a valid email address.
</p>

Leia mais na documentação oficial

Melhorando a leitura com @apply

Dizem que uma desvantagem do tailwind é que dificuldade a leitura do código, adicionando tantas classes no html.

<p class="text-base text-gray-800 mb-3 last:mb-0">Text 1</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 2</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 3</p>
<p class="text-base text-gray-800 mb-3 last:mb-0">Text 4</p>

Isso até é válido mas é possivel usar o @apply para agrupar as classes, reutiliza-las e deixar o código mais legível.

.my-text-base {
    @apply text-base text-gray-800 mb-3 last:mb-0;
}

<p class="my-text-base">Text 1</p>
<p class="my-text-base">Text 2</p>
<p class="my-text-base">Text 3</p>
<p class="my-text-base">Text 4</p>

Leia mais na documentação oficial

Adicionando Prefixo

Se você quiser adicionar tailwind em um projeto e evitar conflitos com outras classes, você pode adicionar um prefixo tw- para as classes do tailwind.

module.exports = {
  prefix: 'tw-',
}

<p class="tw-text-blue-400">Hello, World!</p>

Leia mais na documentação oficial

Playground

Tailwind possui um playground onde você pode testar todas essas funcionalidades e todas as outras online. Basta acessar o link.

https://play.tailwindcss.com/

Conclusão

Desde que comecei a trabalhar com tailwind, raramente precisei criar um novo arquivo CSS ou rescrever propriedades para estilizar um projeto.

Caso esse post não tenha te convencido a usar Tailwind, gostaria de compartilhar mais alguns pontos que considero importante.

  • Tailwind CSS é leve e somente irá adicionar no bundle final as classes que você utilizar durante o desenvolvimento.
  • Tailwind é fácil de configurar, customizar e começar a trabalhar em qualquer projeto web, seja React, Angular, Vue ou só HTML.
  • TailwindCSS pode ser utilizado com outras soluções UI, como bibliotecas, pré processadores e CSS-in-JS.

Espero que você tenha gostado desse meu blog post. Caso tenha alguma dúvida, fique a vontade de me perguntar na sessão de comentários logo a baixo.