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?<\/p>\n
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.<\/p>\n
Il metodo più rapido per iniziare con Tailwind in WordPress è caricarlo via CDN. Bastano poche righe di codice:<\/p>\n
\/\/ functions.php\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('tailwind-cdn', 'https:\/\/cdn.tailwindcss.com', array(), '3.4', false);\n});\n\n\/\/ Carica anche nell'editor Gutenberg\nadd_action('enqueue_block_editor_assets', function() {\n wp_enqueue_script('tailwind-cdn-editor', 'https:\/\/cdn.tailwindcss.com', array(), '3.4', false);\n});<\/code><\/pre>\nVantaggi:<\/strong> zero configurazioni, funziona subito, nessun build step
\nSvantaggi:<\/strong> dipende da CDN (serve internet), non ottimizzato per produzione (il CDN è ~4MB non minificato)<\/p>\nIl CDN è ideale per sviluppo e test. Per produzione, considera il Metodo 3.<\/p>\n
Metodo 2: Tailwind CDN con configurazione personalizzata<\/h2>\n
Anche via CDN puoi personalizzare Tailwind. Aggiungi un blocco script prima del CDN:<\/p>\n
add_action('wp_enqueue_scripts', function() {\n $custom_config = 'tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: \"#00c7b1\",\n \"primary-dark\": \"#0d9488\",\n \"primary-light\": \"#ccfbf1\",\n },\n fontFamily: {\n heading: [\"Plus Jakarta Sans\", \"sans-serif\"],\n },\n borderRadius: {\n \"4xl\": \"2rem\",\n }\n }\n }\n }';\n \n wp_add_inline_script('tailwind-cdn', $custom_config, 'before');\n wp_enqueue_script('tailwind-cdn', 'https:\/\/cdn.tailwindcss.com', array(), '3.4', false);\n});<\/code><\/pre>\nOra puoi usare classi come bg-primary<\/code>, text-primary-dark<\/code>, font-heading<\/code> nei tuoi blocchi Gutenberg.<\/p>\nMetodo 3: Tailwind con build tool (per produzione)<\/h2>\n
Per siti in produzione, il metodo consigliato è compilare Tailwind in un file CSS statico:<\/p>\n
Passo 1: Installa Tailwind<\/h3>\n# Nella cartella del tuo tema\nnpm install tailwindcss @tailwindcss\/cli<\/code><\/pre>\nPasso 2: Crea il file CSS di input<\/h3>\n\/* assets\/css\/tailwind.css *\/\n@import \"tailwindcss\";\n\n\/* Le tue personalizzazioni *\/\n@theme {\n --color-primary: #00c7b1;\n --color-primary-dark: #0d9488;\n}<\/code><\/pre>\nPasso 3: Compila<\/h3>\nnpx tailwindcss -i assets\/css\/tailwind.css -o assets\/css\/tailwind-compiled.css --watch<\/code><\/pre>\nPasso 4: Carica nel tema<\/h3>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_style('tailwind-compiled', get_template_directory_uri() . '\/assets\/css\/tailwind-compiled.css', array(), '1.0');\n});<\/code><\/pre>\nVantaggi:<\/strong> file CSS ottimizzato (solo le classi che usi), nessuna dipendenza CDN, massime performance<\/p>\nTutte le classi Tailwind utili in Gutenberg<\/h2>\n
Ecco un reference completo delle classi Tailwind che uso più frequentemente nei blocchi Gutenberg:<\/p>\n
Layout e dimensioni<\/h3>\n.w-full - Larghezza 100%\n.max-w-4xl - Larghezza massima controllata\n.h-screen - Altezza viewport\n.min-h-screen - Altezza minima viewport<\/code><\/pre>\nSpaziatura (le più comuni)<\/h3>\np-4, p-6, p-8, p-12 - Padding\npx-4, py-8 - Padding orizzontale\/verticale\nm-0, mx-auto, my-8 - Margin\nspace-y-4, space-x-4 - Gap tra figli<\/code><\/pre>\nFlexbox e Grid<\/h3>\nflex, inline-flex - Display flex\nflex-col, flex-row - Direzione\nitems-center, items-start - Allineamento verticale\njustify-center, between - Allineamento orizzontale\ngap-4, gap-8 - Gap\ngrid grid-cols-2 grid-cols-3 - Griglia<\/code><\/pre>\nTipografia<\/h3>\ntext-sm, text-base, text-lg, text-xl, text-2xl, text-3xl\nfont-normal, font-medium, font-semibold, font-bold\ntext-center, text-left, text-right\nleading-tight, leading-relaxed\ntracking-tight, tracking-wide<\/code><\/pre>\nColori di sistema (se non personalizzati)<\/h3>\ntext-gray-600, text-gray-900, text-white\nbg-gray-50, bg-gray-100, bg-white\nborder-gray-200, border-gray-300<\/code><\/pre>\nEffetti<\/h3>\nrounded-lg, rounded-xl, rounded-2xl\nshadow-sm, shadow-md, shadow-lg\ntransition, duration-300, ease-in-out\nhover:shadow-lg, hover:scale-105<\/code><\/pre>\nResponsività<\/h3>\nmd:d-block, md:flex, lg:grid-cols-3\nsm:text-center, lg:text-left<\/code><\/pre>\nEsempi pratici di layout con Tailwind + Gutenberg<\/h2>\nEsempio 1: Hero section<\/h3>\n
Classe per un blocco Group:<\/p>\n
flex flex-col items-center justify-center min-h-[60vh] text-center px-4 bg-gradient-to-b from-gray-50 to-white<\/code><\/pre>\nEsempio 2: Card prodotto<\/h3>\n
Classe per un blocco Group (card):<\/p>\n
bg-white rounded-2xl shadow-md p-6 hover:shadow-lg transition duration-300<\/code><\/pre>\nEsempio 3: Griglia di icone<\/h3>\n
Classe per un blocco Columns:<\/p>\n
grid grid-cols-2 md:grid-cols-4 gap-8<\/code><\/pre>\nEsempio 4: Badge<\/h3>\n
Classe per un blocco Paragraph:<\/p>\n
inline-block bg-primary text-white text-sm font-semibold px-4 py-1.5 rounded-full<\/code><\/pre>\nTailwind e Classy Blocks<\/h2>\n
Se vuoi usare Tailwind senza scrivere configurazioni o ricordare centinaia di classi, Classy Blocks<\/strong> 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.<\/p>\n","protected":false},"excerpt":{"rendered":"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 […]<\/p>\n","protected":false},"author":3,"featured_media":1228,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","ai_primary_source":"Studio Immens Blog","visibility_scope":"","ai_summary":"","ai_intent":"informative","ai_related_resources":"","ai_priority":0,"ai_entity_type":"","ai_is_based_on":"","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"","footnotes":""},"categories":[40],"tags":[114,109,110,113],"ai_visibility":[],"class_list":["post-1160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo-web","tag-framework-css","tag-gutenberg-css","tag-sviluppo-wordpress","tag-tailwind-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/comments?post=1160"}],"version-history":[{"count":1,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1160\/revisions"}],"predecessor-version":[{"id":1180,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1160\/revisions\/1180"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/1228"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1160"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}