Tailwind CSS ha conquistato il mondo dello sviluppo web con il suo approccio “utility-first”: invece di scrivere CSS personalizzato, combini classi predefinite per costruire qualsiasi design. Ma come si usa Tailwind in WordPress senza dover configurare un complicato build tool come PostCSS?
In questa guida completa vedremo TUTTI i metodi per usare Tailwind CSS in Gutenberg, dal più semplice (CDN) al più avanzato (build tool), con esempi pratici per ogni scenario.
Metodo 1: Tailwind via CDN (il più semplice, zero configurazione)
Il metodo più rapido per iniziare con Tailwind in WordPress è caricarlo via CDN. Bastano poche righe di codice:
// functions.php
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('tailwind-cdn', 'https://cdn.tailwindcss.com', array(), '3.4', false);
});
// Carica anche nell'editor Gutenberg
add_action('enqueue_block_editor_assets', function() {
wp_enqueue_script('tailwind-cdn-editor', 'https://cdn.tailwindcss.com', array(), '3.4', false);
});Vantaggi: zero configurazioni, funziona subito, nessun build step
Svantaggi: dipende da CDN (serve internet), non ottimizzato per produzione (il CDN è ~4MB non minificato)
Il CDN è ideale per sviluppo e test. Per produzione, considera il Metodo 3.
Metodo 2: Tailwind CDN con configurazione personalizzata
Anche via CDN puoi personalizzare Tailwind. Aggiungi un blocco script prima del CDN:
add_action('wp_enqueue_scripts', function() {
$custom_config = 'tailwind.config = {
theme: {
extend: {
colors: {
primary: "#00c7b1",
"primary-dark": "#0d9488",
"primary-light": "#ccfbf1",
},
fontFamily: {
heading: ["Plus Jakarta Sans", "sans-serif"],
},
borderRadius: {
"4xl": "2rem",
}
}
}
}';
wp_add_inline_script('tailwind-cdn', $custom_config, 'before');
wp_enqueue_script('tailwind-cdn', 'https://cdn.tailwindcss.com', array(), '3.4', false);
});Ora puoi usare classi come bg-primary, text-primary-dark, font-heading nei tuoi blocchi Gutenberg.
Metodo 3: Tailwind con build tool (per produzione)
Per siti in produzione, il metodo consigliato è compilare Tailwind in un file CSS statico:
Passo 1: Installa Tailwind
# Nella cartella del tuo tema
npm install tailwindcss @tailwindcss/cliPasso 2: Crea il file CSS di input
/* assets/css/tailwind.css */
@import "tailwindcss";
/* Le tue personalizzazioni */
@theme {
--color-primary: #00c7b1;
--color-primary-dark: #0d9488;
}Passo 3: Compila
npx tailwindcss -i assets/css/tailwind.css -o assets/css/tailwind-compiled.css --watchPasso 4: Carica nel tema
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('tailwind-compiled', get_template_directory_uri() . '/assets/css/tailwind-compiled.css', array(), '1.0');
});Vantaggi: file CSS ottimizzato (solo le classi che usi), nessuna dipendenza CDN, massime performance
Tutte le classi Tailwind utili in Gutenberg
Ecco un reference completo delle classi Tailwind che uso più frequentemente nei blocchi Gutenberg:
Layout e dimensioni
.w-full - Larghezza 100%
.max-w-4xl - Larghezza massima controllata
.h-screen - Altezza viewport
.min-h-screen - Altezza minima viewportSpaziatura (le più comuni)
p-4, p-6, p-8, p-12 - Padding
px-4, py-8 - Padding orizzontale/verticale
m-0, mx-auto, my-8 - Margin
space-y-4, space-x-4 - Gap tra figliFlexbox e Grid
flex, inline-flex - Display flex
flex-col, flex-row - Direzione
items-center, items-start - Allineamento verticale
justify-center, between - Allineamento orizzontale
gap-4, gap-8 - Gap
grid grid-cols-2 grid-cols-3 - GrigliaTipografia
text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl
font-normal, font-medium, font-semibold, font-bold
text-center, text-left, text-right
leading-tight, leading-relaxed
tracking-tight, tracking-wideColori di sistema (se non personalizzati)
text-gray-600, text-gray-900, text-white
bg-gray-50, bg-gray-100, bg-white
border-gray-200, border-gray-300Effetti
rounded-lg, rounded-xl, rounded-2xl
shadow-sm, shadow-md, shadow-lg
transition, duration-300, ease-in-out
hover:shadow-lg, hover:scale-105Responsività
md:d-block, md:flex, lg:grid-cols-3
sm:text-center, lg:text-leftEsempi pratici di layout con Tailwind + Gutenberg
Esempio 1: Hero section
Classe per un blocco Group:
flex flex-col items-center justify-center min-h-[60vh] text-center px-4 bg-gradient-to-b from-gray-50 to-whiteEsempio 2: Card prodotto
Classe per un blocco Group (card):
bg-white rounded-2xl shadow-md p-6 hover:shadow-lg transition duration-300Esempio 3: Griglia di icone
Classe per un blocco Columns:
grid grid-cols-2 md:grid-cols-4 gap-8Esempio 4: Badge
Classe per un blocco Paragraph:
inline-block bg-primary text-white text-sm font-semibold px-4 py-1.5 rounded-fullTailwind e Classy Blocks
Se vuoi usare Tailwind senza scrivere configurazioni o ricordare centinaia di classi, Classy Blocks integra Tailwind via CDN con un’interfaccia a menu a tendina. Attivi Tailwind dalle impostazioni, configuri i colori personalizzati, e tutte le classi diventano selezionabili con un click nell’editor Gutenberg. Inoltre supporta altri 7 framework CSS per avere sempre lo strumento giusto a portata di click.
