Utilizzo dei livelli CSS Cascade per gestire gli stili personalizzati in un progetto Tailwind

Se una classe di utilità fa solo una cosa, è probabile che tu non voglia che venga sovrascritta da stili provenienti da altrove. Un approccio è quello di utilizzare !important per essere sicuri al 100% che lo stile verrà applicato, indipendentemente dai conflitti di specificità.

Il file di configurazione di Tailwind ha un !important opzione che aggiungerà automaticamente !important ad ogni classe di utilità. Non c'è niente di sbagliato nell'usare !important in questo modo, ma oggigiorno ci sono modi migliori per gestire la specificità. Usando Livelli CSS a cascata possiamo evitare l'approccio pesante dell'utilizzo !important.

I livelli a cascata ci consentono di raggruppare gli stili in "livelli". La precedenza di un livello batte sempre la specificità di un selettore. La specificità conta solo all'interno di ogni livello. Stabilire un ordine di livello ragionevole aiuta a evitare conflitti di stile e guerre di specificità. Questo è ciò che rende CSS Cascade Layers un ottimo strumento per gestione di stili personalizzati insieme a stili di framework di terze parti, come Tailwind.

Una fonte di vento in coda .css il file di solito inizia qualcosa del genere:

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

Diamo un'occhiata a documenti ufficiali di Tailwind sulle direttive:

Le direttive sono regole at personalizzate specifiche di Tailwind che puoi usare nel tuo CSS che offrono funzionalità speciali per i progetti Tailwind CSS. Utilizzare il @tailwind direttiva per inserire Tailwind base, components, utilities ed variants stili nel tuo CSS.

Nel file CSS di output che viene compilato, il ripristino CSS di Tailwind, noto come Verifica preliminare — è incluso prima come parte degli stili di base. Il resto di base consiste in variabili CSS necessarie per il funzionamento di Tailwind. components è un posto dove puoi aggiungere le tue classi personalizzate. Tutte le classi di utilità che hai utilizzato nel markup verranno visualizzate successivamente. Le varianti sono stili per cose come gli stati al passaggio del mouse e dello stato attivo e gli stili reattivi, che appariranno per ultimi nel file CSS generato.

Il vento di coda @layer Direttive

In modo confuso, Tailwind ha il suo @layer sintassi. Questo articolo riguarda lo standard CSS, ma diamo una rapida occhiata alla versione di Tailwind (che viene compilata e non finisce nel CSS di output). Il vento di coda @layer La direttiva è un modo per iniettare i tuoi stili extra in una parte specificata del file CSS di output.

Ad esempio, per aggiungere i tuoi stili a base stili, dovresti fare quanto segue:

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

I components il livello è vuoto per impostazione predefinita: è solo un posto dove inserire le tue classi. Se stavi facendo le cose alla maniera di Tailwind, probabilmente le useresti @apply (sebbene il creatore di Tailwind di recente sconsigliato), ma puoi anche scrivere classi in modo normale:

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

Lo standard CSS è molto più potente. Torniamo a quello...

Utilizzando lo standard CSS @layer

Ecco come possiamo riscriverlo per utilizzare lo standard CSS @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

A differenza della direttiva Tailwind, questi non vengono compilati. Sono compresi dal browser. In effetti, DevTools in Edge, Chrome, Safari e Firefox ti mostrerà anche tutti i livelli che hai definito.

Puoi avere tutti i livelli che vuoi - e nominarli come vuoi - ma in questo esempio, tutti i miei stili personalizzati sono in un unico livello (my-custom-styles). La prima riga stabilisce l'ordine dei livelli:

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

Questo deve essere fornito in anticipo. Assicurati di includere questa riga prima di qualsiasi altro codice che utilizza @layer. Il primo livello nell'elenco sarà il meno potente e l'ultimo livello nell'elenco sarà il maggior parte potente. Questo significa tailwind-base Europe è meno potente livello e qualsiasi codice in esso contenuto verrà sovrascritto da tutti i livelli successivi. Questo significa anche tailwind-utilities vincerà sempre qualsiasi altro stile - indipendentemente dall'ordine di origine o dalla specificità. (Utilità e varianti potuto vai in livelli separati, ma i manutentori di Tailwind assicureranno che le varianti prevalgano sempre sulle utilità, purché tu includa le varianti sotto la direttiva utilità.)

Tutto ciò che non è in un livello sovrascriverà tutto ciò che si trova in un livello (con l'unica eccezione degli stili che usano !important). Quindi, potresti anche scegliere di andartene utilities ed variants al di fuori di qualsiasi livello:

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Cosa ci ha comprato in realtà? Ci sono molte volte in cui i selettori CSS avanzati sono piuttosto utili. Creiamo una versione di :focus-within che risponde solo allo stato attivo della tastiera anziché ai clic del mouse utilizzando il :has selettore (che atterra in Chrome 105). Questo modellerà un elemento padre quando uno dei suoi figli riceve lo stato attivo. Introdotto Tailwind 3.1 varianti personalizzate - per esempio <div class="[&:has(:focus-visible)]:outline-red-600"> — ma a volte è più facile scrivere semplicemente 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;
  }
}

Diciamo che in un solo caso vogliamo sovrascrivere il outline-color da blue a qualcos'altro. Diciamo che l'elemento con cui stiamo lavorando ha entrambe le classi Tailwind .outline-red-600 e il nostro .radio-container:has(:focus-visible) classe:

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

Quale outline-color vincerà?

Normalmente, la specificità superiore di .radio-container:has(:focus-visible) significherebbe che la classe Tailwind non ha alcun effetto, anche se è inferiore nell'ordine di origine. Ma, a differenza del Tailwind @layer direttiva che si basa sull'ordine di origine, lo standard CSS @layer prevale sulla specificità.

Di conseguenza, possiamo utilizzare selettori complessi nei nostri stili personalizzati, ma comunque sovrascriverli con le classi di utilità di Tailwind quando necessario, senza dover ricorrere a mano pesante !important utilizzo per ottenere ciò che vogliamo.