Usando CSS Cascade Layers para gerenciar estilos personalizados em um projeto Tailwind

Se uma classe utilitária faz apenas uma coisa, é provável que você não queira que ela seja substituída por nenhum estilo vindo de outro lugar. Uma abordagem é usar !important ter 100% de certeza de que o estilo será aplicado, independentemente de conflitos de especificidade.

O arquivo de configuração do Tailwind tem um !important opção que irá adicionar automaticamente !important para cada classe de utilidade. Não há nada de errado em usar !important dessa forma, mas hoje em dia existem maneiras melhores de lidar com a especificidade. Usando Camadas em Cascata CSS podemos evitar a abordagem pesada de usar !important.

Camadas em cascata nos permitem agrupar estilos em “camadas”. A precedência de uma camada sempre supera a especificidade de um seletor. A especificidade só importa dentro de cada camada. Estabelecer uma ordem de camada sensata ajuda a evitar conflitos de estilo e guerras de especificidade. É isso que torna o CSS Cascade Layers uma ótima ferramenta para gerenciar estilos personalizados ao lado de estilos de estruturas de terceiros, como Tailwind.

Uma fonte de vento de cauda .css arquivo geralmente começa algo assim:

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

Vamos dar uma olhada no documentos oficiais do Tailwind sobre diretivas:

As diretivas são regras específicas específicas do Tailwind que você pode usar em seu CSS que oferecem funcionalidade especial para projetos de CSS do Tailwind. Use o @tailwind diretiva para inserir o Tailwind base, components, utilities e variants estilos em seu CSS.

No arquivo CSS de saída que é construído, a redefinição de CSS do Tailwind - conhecida como Comprovação — é incluído primeiro como parte dos estilos base. O resto de base consiste em variáveis ​​CSS necessárias para o Tailwind funcionar. components é um lugar para você adicionar suas próprias classes personalizadas. Quaisquer classes de utilitários que você usou em sua marcação aparecerão em seguida. Variantes são estilos para coisas como estados de foco e foco e estilos responsivos, que aparecerão por último no arquivo CSS gerado.

O vento de cauda @layer Directivas

Confusamente, Tailwind tem seu próprio @layer sintaxe. Este artigo é sobre o padrão CSS, mas vamos dar uma olhada rápida na versão do Tailwind (que é compilada e não termina no CSS de saída). O vento de cauda @layer A diretiva é uma maneira de injetar seus próprios estilos extras em uma parte especificada do arquivo CSS de saída.

Por exemplo, para anexar seus próprios estilos ao base estilos, você faria o seguinte:

@layer base {
  h1 {
    font-size: 30px;
  }
}

A components camada está vazia por padrão - é apenas um lugar para colocar suas próprias classes. Se você estivesse fazendo as coisas do jeito Tailwind, provavelmente usaria @apply (embora o criador do Tailwind recentemente desaconselhou isso), mas você também pode escrever classes da maneira regular:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

O padrão CSS é muito mais poderoso. Voltemos a isso…

Usando o padrão CSS @layer

Veja como podemos reescrever isso para usar o padrão CSS @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 

Ao contrário da diretiva Tailwind, eles não são compilados. Eles são compreendidos pelo navegador. Na verdade, o DevTools no Edge, Chrome, Safari e Firefox mostra até mesmo todas as camadas que você definiu.

Você pode ter quantas camadas quiser - e nomeá-las como quiser - mas neste exemplo, todos os meus estilos personalizados estão em uma única camada (my-custom-styles). A primeira linha estabelece a ordem das camadas:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

Isso precisa ser fornecido antecipadamente. Certifique-se de incluir esta linha antes de qualquer outro código que use @layer. A primeira camada da lista será a mínimo poderoso, e a última camada da lista será a a maioria poderoso. Que significa tailwind-base é o menos poderoso camada e qualquer código nela será substituído por todas as camadas subsequentes. Isso também significa tailwind-utilities sempre superará qualquer outro estilo - independentemente da ordem de origem ou especificidade. (Utilitários e variantes poderia vá em camadas separadas, mas os mantenedores do Tailwind garantirão que as variantes sempre superem os utilitários, desde que você inclua as variantes abaixo da diretiva de utilitários.)

Qualquer coisa que não esteja em uma camada substituirá qualquer coisa que esteja em uma camada (com uma exceção sendo os estilos que usam !important). Então, você também pode optar por deixar utilities e variants fora de qualquer camada:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

O que isso realmente nos comprou? Há muitas vezes em que os seletores avançados de CSS são bastante úteis. Vamos criar uma versão de :focus-within que responde apenas ao foco do teclado em vez de cliques do mouse usando o :has seletor (que cai no Chrome 105). Isso estilizará um elemento pai quando qualquer um de seus filhos receber o foco. Tailwind 3.1 introduzido variantes personalizadas - por exemplo <div class="[&:has(:focus-visible)]:outline-red-600"> — mas às vezes é mais fácil escrever CSS:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

Digamos que em apenas uma instância queremos substituir o outline-color da blue para outra coisa. Digamos que o elemento com o qual estamos trabalhando tenha a classe Tailwind .outline-red-600 e o nosso .radio-container:has(:focus-visible) classe:

<div class="outline-red-600 radio-container"> ... </div>

Qual outline-color vai ganhar?

Normalmente, a maior especificidade de .radio-container:has(:focus-visible) significaria que a classe Tailwind não tem efeito - mesmo que seja mais baixa na ordem de origem. Mas, ao contrário do Tailwind @layer diretiva que depende da ordem de origem, o padrão CSS @layer anula a especificidade.

Como resultado, podemos usar seletores complexos em nossos próprios estilos personalizados, mas ainda substituí-los pelas classes utilitárias do Tailwind quando precisarmos - sem ter que recorrer a métodos pesados !important uso para obter o que queremos.