CSS in React: className, stili inline, CSS Modules, Tailwind

Ai componenti React si dà stile con il normale CSS. Assegna una classe agli elementi con la prop className e scrivi le regole in un foglio di stile, usa la prop style per i valori che arrivano da JavaScript, e passa ai CSS Modules o a Tailwind quando un progetto cresce. L'esempio qui sotto definisce il suo CSS in un elemento <style> così da poter girare in questa pagina; in un progetto starebbe in un file .css.

export default function App() {
    return (
        <div>
            <style>{`
                .card { border: 1px solid #ddd; border-radius: 10px; padding: 16px; max-width: 280px; }
                .card-title { margin: 0 0 8px; font-size: 18px; }
                .btn { background: #2563eb; color: white; border: 0; border-radius: 6px; padding: 8px 14px; }
            `}</style>
            <div className="card">
                <h3 className="card-title">Pro plan</h3>
                <p>Unlimited lessons and projects.</p>
                <button className="btn">Upgrade</button>
            </div>
        </div>
    );
}

Cambia #2563eb in #16a34a nella regola .btn e il pulsante diventa verde. Tutto ciò che sai del CSS vale anche qui: selettori, media query, stati hover, animazioni.

className, non class

JSX viene compilato in JavaScript, dove class è una parola riservata, quindi React usa className, il nome che il DOM stesso usa per quella proprietà (element.className). Il browser riceve comunque un normale attributo class. La stessa sostituzione vale per htmlFor al posto di for sulle etichette. React 19 accetta class con un avviso in sviluppo, ma className è il nome corretto e quello che usano tutte le codebase.

className accetta una stringa, quindi più classi si separano con uno spazio: className="btn btn-primary". Poiché il valore è JavaScript, può essere calcolato.

Classi condizionali

Per aggiungere una classe solo in alcuni casi, costruisci la stringa con un ternario o un template literal. Una barra di schede che evidenzia la scheda selezionata è il caso classico.

import { useState } from 'react';

const TABS = ['Overview', 'Lessons', 'Reviews'];

export default function App() {
    const [active, setActive] = useState('Overview');

    return (
        <div>
            <style>{`
                .tab { border: 0; background: none; padding: 8px 12px; border-bottom: 2px solid transparent; }
                .tab.active { border-bottom-color: #2563eb; color: #2563eb; font-weight: 600; }
                .tab.disabled { color: #aaa; }
            `}</style>
            {TABS.map((tab) => (
                <button
                    key={tab}
                    className={`tab ${tab === active ? 'active' : ''} ${tab === 'Reviews' ? 'disabled' : ''}`}
                    disabled={tab === 'Reviews'}
                    onClick={() => setActive(tab)}
                >
                    {tab}
                </button>
            ))}
            <p>Showing: {active}</p>
        </div>
    );
}

Clicca Lessons e la sottolineatura si sposta, perché ora solo la stringa di quel pulsante contiene active. Reviews riceve la classe disabled e l'attributo disabled, quindi è grigio e ignora i clic. Il template literal lascia spazi in più quando una condizione è falsa, e i browser li ignorano. Quando un componente ha molte classi condizionali, un array è più ordinato:

const classes = ['tab', isActive && 'active', isDisabled && 'disabled']
    .filter(Boolean)
    .join(' ');

Molti progetti usano il minuscolo pacchetto clsx per lo stesso scopo: clsx('tab', { active: isActive, disabled: isDisabled }).

La prop style

La prop style accetta un oggetto JavaScript, non una stringa. Per questo ha le doppie graffe: la coppia esterna apre un'espressione JavaScript, quella interna è il letterale dell'oggetto. I nomi delle proprietà sono in camelCase (backgroundColor, fontSize, borderRadius), e i valori sono stringhe o numeri. Un numero su una proprietà di lunghezza diventa pixel, quindi padding: 12 significa 12px.

Gli stili inline danno il meglio quando un valore viene calcolato al momento del rendering, come la larghezza di una barra di avanzamento.

import { useState } from 'react';

export default function App() {
    const [percent, setPercent] = useState(30);
    const done = percent >= 100;

    return (
        <div style={{ maxWidth: 320 }}>
            <div style={{ height: 12, background: '#e5e7eb', borderRadius: 6, overflow: 'hidden' }}>
                <div
                    style={{
                        width: percent + '%',
                        height: '100%',
                        backgroundColor: done ? '#16a34a' : '#2563eb',
                        transition: 'width 0.3s',
                    }}
                />
            </div>
            <p style={{ fontSize: 14, opacity: 0.8 }}>{percent}% complete</p>
            <button onClick={() => setPercent(Math.min(100, percent + 10))}>Add 10%</button>{' '}
            <button onClick={() => setPercent(0)}>Reset</button>
        </div>
    );
}

Clicca Add 10% finché la barra si riempie e diventa verde. Nota width: percent + '%': un numero da solo significherebbe pixel, quindi le unità diverse da px vanno in una stringa. Le proprietà senza unità restano semplici numeri, come opacity: 0.8, zIndex: 2, flexGrow: 1 e lineHeight: 1.5 (che è un moltiplicatore, non pixel).

Gli stili inline hanno dei limiti. Non possono esprimere :hover, :focus, media query o animazioni keyframe, e ogni elemento porta con sé la propria copia delle regole. Usali per i valori dinamici e tieni il resto nel CSS.

Variabili CSS dalle props

Una buona via di mezzo è impostare una custom property CSS in style e usarla dal foglio di stile. Le regole restano nel CSS, stati hover inclusi, e solo il valore arriva da JavaScript.

import { useState } from 'react';

export default function App() {
    const [accent, setAccent] = useState('#2563eb');

    return (
        <div style={{ '--accent': accent }}>
            <style>{`
                .pill { border: 2px solid var(--accent); color: var(--accent); background: none;
                        border-radius: 999px; padding: 6px 14px; }
                .pill:hover { background: var(--accent); color: white; }
            `}</style>
            <label>
                Accent color <input type="color" value={accent} onChange={(e) => setAccent(e.target.value)} />
            </label>
            <p>
                <button className="pill">Follow</button> <button className="pill">Share</button>
            </p>
        </div>
    );
}

Scegli un nuovo colore ed entrambi i pulsanti lo seguono, e il riempimento al passaggio del mouse funziona ancora perché è semplice CSS. I nomi delle custom property mantengono i trattini nell'oggetto style, quindi vanno tra virgolette: { '--accent': accent }.

File CSS

In un progetto reale scrivi gli stili in file .css e li importi dal componente che ne ha bisogno. Con Vite basta l'import: lo strumento di build vede import './Button.css', aggiunge il foglio di stile alla pagina durante lo sviluppo e lo include in un file CSS per la produzione. Non c'è alcun export da usare; l'import esiste solo per il suo effetto collaterale.

// Button.jsx
import './Button.css';

export default function Button({ children }) {
    return <button className="button">{children}</button>;
}

/* Button.css */
.button {
    background: #2563eb;
    color: white;
    border-radius: 6px;
}

Il problema è che ogni foglio di stile importato è globale. Una regola .button in Button.css dà stile a ogni elemento con quella classe, ovunque nell'app, e due file che definiscono entrambi .title si sovrascrivono a vicenda. I team lo gestiscono con convenzioni di nomi come BEM (.card__title), oppure con i CSS Modules.

CSS Modules

Un file che termina in .module.css è un CSS Module. Importarlo ti dà un oggetto che associa ogni nome di classe che hai scritto a un nome generato univoco, quindi una classe può applicarsi solo dove la usi. Vite e Next.js lo supportano senza alcuna configurazione.

// Card.jsx
import styles from './Card.module.css';

export default function Card({ title, children, featured }) {
    return (
        <section className={featured ? `${styles.card} ${styles.featured}` : styles.card}>
            <h3 className={styles.title}>{title}</h3>
            {children}
        </section>
    );
}

/* Card.module.css */
.card { border: 1px solid #ddd; border-radius: 10px; padding: 16px; }
.featured { border-color: #2563eb; }
.title { margin: 0; }

Nel browser la classe diventa qualcosa come _card_1x2ab_1. Un altro componente può definire il proprio .title e i due non entrano mai in conflitto. Scrivi CSS normale, regole hover e media query incluse, ed è per questo che i CSS Modules sono una scelta predefinita comune per gli stili dei componenti.

Tailwind CSS con React

Tailwind ha un approccio diverso: invece di scrivere regole, componi piccole classi di utilità direttamente in className. px-4 imposta il padding orizzontale, rounded-lg arrotonda gli angoli, hover:bg-blue-700 cambia lo sfondo al passaggio del mouse. Tailwind analizza i tuoi file e genera CSS solo per le classi che usi.

Configurarlo in un'app React con Vite (Tailwind v4) richiede tre passaggi:

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [react(), tailwindcss()],
});

/* src/index.css, imported from main.jsx */
@import "tailwindcss";

Poi dai stile ai componenti con le classi:

function UpgradeCard({ active }) {
    return (
        <div className="max-w-xs rounded-xl border border-gray-200 p-4">
            <h3 className="mb-2 text-lg font-semibold">Pro plan</h3>
            <button
                className={`rounded-md px-4 py-2 text-white ${active ? 'bg-green-600' : 'bg-blue-600 hover:bg-blue-700'}`}
            >
                {active ? 'Active' : 'Upgrade'}
            </button>
        </div>
    );
}

Tailwind non è disponibile negli editor di questa pagina, quindi è mostrato come codice statico. Le classi condizionali funzionano esattamente come nell'esempio delle schede qui sopra, ma scrivi ogni nome di classe per intero: Tailwind trova le classi analizzando il testo del tuo codice sorgente, quindi un nome assemblato a runtime come `bg-${color}-600` non viene mai generato.

Quando usare quale

• I semplici file CSS vanno bene per app piccole e stili globali (reset, font, layout della pagina). Fai attenzione ai conflitti tra nomi di classe man mano che l'app cresce.
• I CSS Modules vanno bene per la maggior parte degli stili dei componenti: CSS normale, isolato automaticamente, nessuna libreria in più.
• Tailwind va bene per i team che preferiscono dare stile nel markup e vogliono una scala di design condivisa per spaziature e colori.
• La prop style serve per i valori calcolati al momento del rendering: una larghezza, una posizione, il colore scelto da un utente. Abbinala alle variabili CSS per tenere le regole hover e media nel CSS.

Puoi combinarli. Un'app tipica ha un foglio di stile globale, CSS Modules o Tailwind per i componenti e qualche stile inline per i valori dinamici. Le librerie CSS in JS come styled-components ed Emotion sono un'altra opzione che incontrerai nelle codebase più vecchie. La pagina su come installare React mostra come avviare un progetto Vite in cui funzionano tutti questi approcci.