# Tailwind: the class is not applied, content, @source and dynamic classes

Tailwind generates only the classes it can read in your files. When one is missing the cause is the scan: wrong path, outside package, runtime string.

> Page: https://ui.eneawork.it/blog/tailwind-classe-non-applicata-content-paths
> Markdown: https://ui.eneawork.it/blog/tailwind-classe-non-applicata-content-paths.md

*2026-11-01*

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à.

Il tag tailwind-css conta 10.551 domande sulla Stack Exchange API al 31 ottobre 2026. La domanda «How to add a @tailwind CSS rule to CSS checker» ha 386 voti; il tema delle classi mancanti è il più ricorrente nel tag. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi, 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. Ogni comando qui sotto è eseguibile in locale: nessun passaggio richiede un account.

## 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

## 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.

## FAQ

### Perché in sviluppo funziona e in produzione no?

In sviluppo il watcher vede anche file fuori dal percorso di build; in produzione il CSS viene generato una volta sola con i percorsi configurati.

### Devo usare safelist?

Solo per nomi che non puoi scrivere per intero. Safelist aumenta il CSS e maschera il problema reale: una classe costruita a runtime.

### Come funziona in Tailwind 4?

La scansione è automatica sul progetto. Per una libreria in node_modules serve `@source "../node_modules/@acme/ui";` nel CSS che importa Tailwind.

### `className={ok ? 'bg-red-500' : 'bg-red-100'}` viene generata?

Sì: entrambe le stringhe sono nel sorgente. Non viene generata `bg-${color}-500`, perché il file contiene solo il frammento.

### Come verifico quale CSS è stato generato?

Esegui la build e cerca la classe nel file di output. Se manca, il problema è nella scansione; se c'è, il problema è di specificità o di ordine dei layer.