Entendendo funções e diretivas do Tailwind CSS

Texto de: Letícia Garcez

Introdução

O Tailwind CSS é um framework cheio de classes CSS utilitárias que podem ser usadas para criar qualquer design diretamente das tags da linguagem de marcação, o que torna a estilização de uma página mais simples.

Neste artigo, iremos um pouco além das classes utilitárias padrão do framework e exploraremos as funções e diretivas, que são recursos que podem personalizar ainda mais a sua experiência de desenvolvimento com esse framework.

Diretivas

Vamos começar pelas diretivas. As diretivas são as at-rules do Tailwind CSS, ou seja, são regras que dizem como o Tailwind CSS deve se comportar. Você provavelmente já esbarrou com esse tipo de regra, já que ela também existe no CSS. Um exemplo, é a at-rule @media, usada para criar media queries dentro do CSS. Você pode obter mais informações sobre at-rules clicando aqui.

@tailwind

Essa diretiva é utilizada para carregar os diferentes conjuntos de estilos do Tailwind que estão listados abaixo.

• base: estilos base do Tailwind e estilos base que sejam registrados por plugins
• components: classes de componentes do Tailwind e classes de componente adicionadas por plugins
• utilitiles: classes utilitárias do Tailwind e classes utilitárias registradas por plugins.
• variants: controle de hover, focus, responsividade, dark mode, entre outros. Se omitido, o Tailwind irá adicionar essas classes automaticamente no final da sua folha de estilo.

Se você estiver seguindo o guia de instalação do Tailwind em uma nova aplicação verá que é pedido que você insira o código abaixo dentro do seu arquivo CSS global. Isso é preciso para que todos esses estilos do Tailwind sejam carregados para dentro da sua aplicação. Aqui vale lembrar que @tailwind variants; pode ser omitido nessas definições.

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

@layer

A diretiva @layer serve para indicar em qual conjunto (ou camada) de regras uma regra personalizada se encontra. Os conjuntos válidos são base, components, e utilities. Utilizar essa diretiva é uma ótima opção se você quer criar suas próprias classes personalizadas com comportamentos que não existem dentro do framework.

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

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

O CSS definido em uma diretiva @layer será automaticamente inserido na diretiva @tailwind correspondente àquela camada, então você não precisa se preocupar com a ordem em que define esse CSS. Esses códigos CSS também serão adicionados automaticamente na build do seu projeto caso sejam usadas em algum lugar da sua aplicação.

@apply

A diretiva @apply permite a criação de classes utilitárias personalizadas a partir de classes que já existem dentro do framework, o que acaba sendo muito útil quando pensamos em reuso de código.

Nas minhas aplicações, sempre me deparo com a necessidade de centralizar o conteúdo de um elemento com display flex na orientação de coluna. Para isso, preciso utilizar as seguintes classes: flex flex-col justify-center items-center, e embora escrever essas quatro classes já seja um avanço com relação ao que precisaria ser escrito com CSS puro, podemos definir uma nova classe para encapsular todo esse comportamento, como no código abaixo:

.flex-col-center {
  @apply flex flex-col justify-center items-center;
}

É importante mencionar que essa diretiva ainda possui algumas limitações relacionadas ao uso em componentes de frameworks que permitem a criação de tags style por componente, como Vue e Svelte. Para mais informações, você pode consultar a documentação do framework clicando aqui.

@config

A diretiva @config é usada para indicar qual arquivo de configuração o Tailwind deve usar para compilar aquele arquivo em específico. Isso pode ser útil em projetos que precisam de diferentes arquivos de configuração para necessidades específicas.

Funções

Agora que já abordamos as diretivas, falaremos das funções. No Tailwind, funções permitem que você modifique valores específicos do Tailwind, como cores, escalas de espaçamento e tamanhos de fonte. Essas funções são avaliadas em tempo de execução e serão modificadas por valores estáticos no CSS final gerado pela ferramenta.

theme()

A função theme() permite que você acesse valores do seu tema do Tailwind. Isso pode ser feito usando a notação ponto ou a notação de chaves como mostrado abaixo:

.content-area {
  height: calc(100vh - theme(spacing.12));
}

// se houver um . no nome do valor que será acessado
.content-area {
  height: calc(100vh - theme(spacing[2.5]));
}

// cores e seus subvalores devem ser acessados sempre com a notação .
.btn-blue {
  background-color: theme(colors.blue.500);
}

screen()

A função screen() permite que você crie media queries referenciando os nomes dos tamanhos de tela definidos no tema ao invés de seus valores absolutos:

@media screen(sm) {
  /* ... */
}

Conclusão

As funções e diretivas do Tailwind CSS são ferramentas poderosas que permitem personalizar e estender a biblioteca de classes utilitárias de maneira a atender melhor as necessidades específicas do seu projeto. Ao utilizar essas funcionalidades, você pode criar estilos personalizados para suas aplicações web e tornar o seu processo de desenvolvimento mais eficiente e rápido.

No entanto, é importante lembrar que as funções e diretivas devem ser utilizadas com moderação. Tente manter suas classes e estilos o mais simples possível, para que o código seja fácil de entender e manter.