Tailwind: la classe non viene applicata, content, @source e classi dinamiche

Risposta breve: Tailwind genera solo le classi che riesce a leggere come testo nei file scansionati. Se la classe manca nel CSS, il problema è nel percorso di scansione o nella stringa costruita a runtime, non nella specificità.

Tre cause, tre verifiche

Tailwind 3: la chiave content

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "../packages/ui/src/**/*.{js,ts,jsx,tsx}",
  ],
};

Il percorso è relativo alla cartella del file di configurazione, non alla radice del repository. È l'errore più frequente nei monorepo: il pacchetto UI sta fuori e nessuno lo dichiara.

Tailwind 4: scansione automatica e @source

@import "tailwindcss";
@source "../node_modules/@acme/ui";
@source "../../packages/www/src";

In Tailwind 4 la scansione parte dal progetto, ma ignora node_modules per scelta. Una libreria di componenti installata da npm va aggiunta con @source, altrimenti le sue classi non entrano nel CSS.

Le classi dinamiche

Questa riga non funziona e non funzionerà:

Nel file esiste solo bg- più un'espressione: Tailwind non ha una stringa completa da generare. La correzione è una mappa esplicita, che ha anche il vantaggio di essere verificabile dal compilatore.

const TONE = {
  danger: "bg-red-500",
  warning: "bg-amber-500",
  ok: "bg-emerald-500",
} as const;

export function Badge({ tone }: { tone: keyof typeof TONE }) {
  return ;
}

Quando la correzione non funziona

Se la classe è nel CSS generato ma non si vede, il problema non è la scansione: è l'ordine dei layer, una regola più specifica che la sovrascrive, oppure un @apply dentro un file importato prima di Tailwind. In quel caso apri il pannello Computed e cerca la proprietà: la risposta è lì, non nella configurazione.

Un secondo caso limite: i contenuti caricati dopo il build, per esempio HTML da un CMS. Tailwind non li vede. O usi classi presenti altrove nel progetto, o accetti una safelist esplicita e ne misuri il peso.

Come prevenirlo

• Tieni le classi come stringhe letterali: nessuna concatenazione, nessun template parziale.
• Aggiungi un test che compila il CSS di produzione e cerca tre classi critiche.
• Nel monorepo, dichiara i pacchetti UI una volta sola in un file condiviso di configurazione.

Dove continuare

Per costruire senza sorprese: componenti, temi e un blocco pricing con preview. Le guide: dark mode senza duplicare il design system e Flexbox e Grid per designer; il confronto: temi shadcn gratuiti e premium.