{"id":72028,"date":"2023-08-07T17:23:52","date_gmt":"2023-08-07T16:23:52","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=72028&#038;preview=true&#038;preview_id=72028"},"modified":"2023-08-08T13:25:59","modified_gmt":"2023-08-08T12:25:59","slug":"laravel-tailwind","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/","title":{"rendered":"Come creare pagine bellissime con Tailwind CSS e Laravel"},"content":{"rendered":"<p>Ogni sito web Laravel ha bisogno di un po&#8217; di stile e <a href=\"https:\/\/kinsta.com\/it\/blog\/tailwind-css\/\">Tailwind CSS \u00e8 il modo pi\u00f9 semplice per dare un tocco di classe a un sito<\/a>. Questo framework CSS di utility offre classi predefinite per lo stile degli elementi HTML. Invece di scrivere un codice CSS infinito, si possono creare pagine web personalizzate in modo rapido e poi mantenere e scalare facilmente i propri fogli di stile.<\/p>\n<p>Tailwind fa parte dello <a href=\"https:\/\/tallstack.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">stack TALL<\/a>, insieme ad Alpine.js e Livewire. La comunit\u00e0 di Laravel ha creato questa soluzione di sviluppo full-stack per aiutare gli sviluppatori di ogni livello a prototipare rapidamente le applicazioni web. Queste soluzioni sono facili da usare senza avere una conoscenza approfondita delle tecnologie front-end o back-end.<\/p>\n<p>Questo articolo pratico spiega come utilizzare Tailwind CSS per dare un tocco di classe al proprio progetto Laravel e poi distribuirlo con MyKinsta.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Valorizzare un progetto Laravel con Tailwind<\/h2>\n<p>Per iniziare, creiamo una pagina Laravel di base e usiamo Tailwind CSS per abbellirla con il minimo sforzo.<\/p>\n<h3>Prerequisiti<\/h3>\n<p>Per seguire il tutorial, avremo bisogno di:<\/p>\n<ul>\n<li><a href=\"https:\/\/laravel.com\/docs\/10.x\" target=\"_blank\" rel=\"noopener noreferrer\">Laravel<\/a> e <a href=\"https:\/\/getcomposer.org\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">Composer<\/a> installati.<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a> e npm installati.<\/li>\n<li>Un account <a href=\"https:\/\/my.kinsta.com\/?lang=it\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a> per la distribuzione. Se non ne avete ancora uno, <a href=\"https:\/\/kinsta.com\/it\/registrazione\/?product_type=app-db\">registratevi per una prova gratuita<\/a>.<\/li>\n<\/ul>\n<p>Per vedere il progetto finale, date un&#8217;occhiata al <a href=\"https:\/\/github.com\/VirtuaCreative\/kinsta-laravel-tailwind\" target=\"_blank\" rel=\"noopener noreferrer\">codice completo del progetto<\/a>.<\/p>\n<h2>Progetto Laravel e configurazione di Tailwind<\/h2>\n<p>Per creare un nuovo progetto Laravel utilizzando Composer:<\/p>\n<ol start=\"1\">\n<li>Apriamo il terminale nella directory in cui vogliamo che il progetto risieda ed eseguiamolo:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">composer create-project laravel\/laravel my-project<\/code><\/pre>\n<ol start=\"2\">\n<li>Andiamo alla directory <strong>my-project<\/strong> per installare i pacchetti necessari:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-project<\/code><\/pre>\n<ol start=\"3\">\n<li>Installiamo i pacchetti per lavorare con Tailwind:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm install -D tailwindcss postcss autoprefixer<\/code><\/pre>\n<ol start=\"4\">\n<li>Eseguiamo il seguente comando per impostare i file di configurazione di Tailwind:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npx tailwindcss init -p<\/code><\/pre>\n<p>Questa azione inserisce due file nella root del progetto: <strong>tailwind.config.js<\/strong> e <strong>postcss.config.js<\/strong>.<\/p>\n<h2>Configurare i percorsi dei template<\/h2>\n<ol start=\"1\">\n<li>Successivamente, configuriamo i percorsi dei template nel file <strong>tailwind.config.js<\/strong>. Laravel cerca i file CSS nella directory pubblica per impostazione predefinita. Il percorso del template indica a Laravel dove trovare i file CSS dell&#8217;applicazione.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Sostituiamo il codice all&#8217;interno del file <strong>tailwind.config.js<\/strong> con questo:<\/li>\n<\/ol>\n<pre><code class=\"language-javascript\">\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\ncontent: [\n\".\/resources\/**\/*.blade.php\",\n\".\/resources\/**\/*.js\",\n\".\/resources\/**\/*.vue\",\n],\ntheme: {\nextend: {},\n},\nplugins: [],\n}<\/code><\/pre>\n<h2>Aggiungere le direttive Tailwind CSS al CSS del progetto<\/h2>\n<ol start=\"1\">\n<li>Per aggiungere le direttive CSS di Tailwind, andiamo nella cartella <strong>resources\/css<\/strong> e apriamo il file <strong>app.css.<\/strong><\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Quindi, aggiungiamo il seguente codice:<\/li>\n<\/ol>\n<pre><code class=\"language-css\">@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/code><\/pre>\n<h2>Costruire l&#8217;applicazione<\/h2>\n<p>Prima di eseguire l&#8217;applicazione in locale:<\/p>\n<ol start=\"1\">\n<li>Avviamo il server di sviluppo Vite:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm run dev<\/code><\/pre>\n<p>Questo comando raggruppa il file di risorse statiche, incluso il CSS di Tailwind, e avviamo il server locale di Vite.<\/p>\n<ol start=\"2\">\n<li>Usiamo Artisan per eseguire l&#8217;applicazione Laravel:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">php artisan serve<\/code><\/pre>\n<p>L&#8217;applicazione dovrebbe essere in esecuzione all&#8217;indirizzo <code>http:\/\/127.0.0.1:8000\/<\/code>. Mostra l&#8217;output predefinito di un&#8217;applicazione Laravel appena creata.<\/p>\n<p>Aprendo il file di route view <strong>resources\/views\/welcome.blade.php<\/strong>, possiamo vedere che utilizza gi\u00e0 le classi di utilit\u00e0 di Tailwind.<\/p>\n<h2>Come creare un semplice componente Tailwind<\/h2>\n<p>Per capire meglio come funziona Tailwind:<\/p>\n<ol start=\"1\">\n<li>Apriamo <strong>resources\/views\/welcome.blade.php<\/strong>.<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>Cancelliamo il codice dalla vista di benvenuto dell&#8217;applicazione.<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>Sostituiamolo con il codice qui sotto, che renderizza un bellissimo componente scheda:<\/li>\n<\/ol>\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n      @vite('resources\/css\/app.css')\n    &lt;title&gt;Document&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=\"max-w-md  m-24 rounded overflow-hidden shadow-lg\"&gt;\n      &lt;img class=\"w-full\" src=\"https:\/\/picsum.photos\/400\/300\" alt=\"Blog Image\"&gt;\n      &lt;div class=\"px-6 py-4\"&gt;\n        &lt;h2 class=\"font-bold text-2xl mb-2\"&gt;This is My Blog Title&lt;\/h2&gt;\n        &lt;p class=\"mt-3 text-gray-600 text-base\"&gt;\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,\n                exercitationem praesentium nihil.\n        &lt;\/p&gt;\n        &lt;button class=\"mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded\"&gt;\n            Read More\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Il codice qui sopra utilizza Vite per importare il file <strong>app.css<\/strong> tramite <code>@vite('resources\/css\/app.css')<\/code>. Importa anche Tailwind. Crea un componente di markup fondamentale per creare una scheda del blog utilizzando queste classi di utilit\u00e0 CSS di Tailwind:<\/p>\n<ul>\n<li><code>max-w-sm<\/code> &#8211; Imposta la larghezza massima del contenitore alla dimensione del breakpoint sm (piccolo).<\/li>\n<li><code>m-24<\/code> &#8211; Aggiunge un margine di 24 unit\u00e0 (96px o 6rem) a tutti i lati del contenitore.<\/li>\n<li><code>rounded<\/code> &#8211; Aggiunge un bordo-raggio per rendere gli angoli del contenitore arrotondati.<\/li>\n<li><code>overflow-hidden<\/code> &#8211; Nasconde qualsiasi contenuto che superi il contenitore.<\/li>\n<li><code>shadow-lg<\/code> &#8211; Aggiunge un effetto ombra al contenitore.<\/li>\n<li><code>w-full<\/code> &#8211; Imposta la larghezza dell&#8217;immagine al 100% del suo contenitore.<\/li>\n<li><code>px-6 py-4<\/code> &#8211; Aggiunge un padding di 6 unit\u00e0 (24px o 1,5rem) sull&#8217;asse x e di 4 unit\u00e0 (16px o 1rem) sull&#8217;asse y.<\/li>\n<li><code>font-bold<\/code> &#8211; Imposta il peso del carattere del testo in grassetto.<\/li>\n<li><code>text-xl<\/code> &#8211; Imposta la dimensione del carattere del testo a extra-large.<\/li>\n<li><code>mb-2<\/code> &#8211; Aggiunge un margine inferiore di 2 unit\u00e0 (0,5rem o 8px) all&#8217;elemento.<\/li>\n<li><code>text-gray-600<\/code> &#8211; Imposta il colore del testo in grigio scuro.<\/li>\n<li><code>text-base<\/code> &#8211; Imposta la dimensione del carattere del testo come predefinita.<\/li>\n<\/ul>\n<p>Quando visualizziamo l&#8217;anteprima dell&#8217;applicazione nel browser, dovremmo vedere un risultato simile a quello qui sotto.<\/p>\n<figure style=\"width: 992px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-blog-post.jpg\" alt=\"Esempio di componente su una pagina web\" width=\"992\" height=\"1122\"><figcaption class=\"wp-caption-text\">Esempio di componente su una pagina web<\/figcaption><\/figure>\n<h2>Distribuire un progetto Laravel Tailwind su Kinsta<\/h2>\n<p>Prima di <a href=\"https:\/\/sevalla.com\/application-hosting\/\">distribuire e ospitare l&#8217;applicazione Laravel<\/a> su Kinsta, apportiamo alcune modifiche per assicurarci che funzioni correttamente quando viene ospitata.<\/p>\n<ol start=\"1\">\n<li>Apriamo <strong>app\/Http\/Middleware\/TrustProxies.php<\/strong>. Modifichiamo il valore di <code>protected $proxies<\/code> per consentire all&#8217;applicazione Laravel di fidarsi di tutti i proxy:<\/li>\n<\/ol>\n<pre><code class=\"language-php\">protected $proxies = '*';<\/code><\/pre>\n<ol start=\"2\">\n<li>Creiamo un nuovo file <strong>.htaccess<\/strong> nella directory principale del progetto e incolliamo il seguente codice:<\/li>\n<\/ol>\n<pre><code class=\"language-apacheconf\">&lt;IfModule mod_rewrite.c&gt;\n  RewriteEngine On\n  RewriteRule ^(.*)$ public\/$1 [L]\n&lt;\/IfModule&gt;<\/code><\/pre>\n<ol start=\"3\">\n<li>Creiamo un nuovo repository Git e inseriamoci il codice (Kinsta supporta il push da GitHub, GitLab e Bitbucket).<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Accediamo al nostro account Kinsta o creamone uno nuovo. Una volta nella <a href=\"https:\/\/my.kinsta.com\/?lang=it\">dashboard MyKinsta<\/a>, clicchiamo sul pulsante <strong>Aggiungi servizio<\/strong>, quindi selezioniamo <strong>Applicazione<\/strong>, come nella schermata qui sotto.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-mykinsta-create-app.png\" alt=\"Aggiungere un'applicazione su MyKinsta\" width=\"1999\" height=\"776\"><figcaption class=\"wp-caption-text\">Aggiungere un&#8217;applicazione su MyKinsta<\/figcaption><\/figure>\n<p>MyKinsta chiede di collegare l&#8217;account Git. Completiamo l&#8217;autorizzazione come richiesto, poi selezioniamo il progetto di cui abbiamo precedentemente effettuato il push nel repository e il branch che vogliamo utilizzare.<\/p>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-app-details-mykinsta.jpg\" alt=\"Configurare i dettagli di una nuova applicazione su Kinsta\" width=\"1999\" height=\"1096\"><figcaption class=\"wp-caption-text\">Configurare i dettagli di una nuova applicazione su Kinsta<\/figcaption><\/figure>\n<ol start=\"5\">\n<li>Aggiungiamo l&#8217;<code>APP_KEY<\/code> Laravel nella sezione <strong>Variabili d&#8217;ambiente<\/strong>. La chiave si trova nel file <strong>.env<\/strong> della cartella locale del progetto.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/laravel-tailwind-env-variables-mykinsta.png\" alt=\"Configurare le variabili d'ambiente dell'applicazione su Kinsta\" width=\"1999\" height=\"1097\"><figcaption class=\"wp-caption-text\">Configurare le variabili d&#8217;ambiente dell&#8217;applicazione su Kinsta<\/figcaption><\/figure>\n<ol start=\"6\">\n<li>Clicchiamo su <strong>Continua<\/strong> e selezioniamo l&#8217;ambiente di build in base alle nostre preferenze.<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Lasciamo per ora vuoto il comando di avvio nella sezione <strong>Risorse<\/strong> e clicchiamo su <strong>Continua<\/strong> per procedere.<\/li>\n<\/ol>\n<ol start=\"8\">\n<li>Infine, completiamo le informazioni sul pagamento. La distribuzione inizia immediatamente.<\/li>\n<\/ol>\n<p>Per eseguire correttamente l&#8217;applicazione abbiamo bisogno di due pacchetti di build: PHP per eseguire i comandi <code>php<\/code> e Node.js per eseguire i comandi <code>npm<\/code>. Per farlo:<\/p>\n<ol start=\"9\">\n<li>Andiamo all&#8217;applicazione e, nella navigazione a sinistra, clicchiamo su <strong>Impostazioni<\/strong>.<\/li>\n<\/ol>\n<ol start=\"10\">\n<li>Clicchiamo su <strong>Aggiungi buildpack<\/strong> e aggiungiamo i build pack per Node.js e PHP. Tuttavia, assicuriamoci che il build pack PHP sia <a href=\"https:\/\/docs.sevalla.com\/applications\/build-options\/buildpacks#add-or-edit-buildpacks\">aggiunto per ultimo<\/a> nella sequenza, poich\u00e9 si tratta di un&#8217;applicazione basata su PHP.<\/li>\n<\/ol>\n<ol start=\"11\">\n<li>Clicchiamo sul pulsante <strong>Distribuisci ora<\/strong> che appare dopo aver aggiunto i nuovi pacchetti di build, come illustrato nell&#8217;immagine seguente.<\/li>\n<\/ol>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/mykinsta-app-buildpacks-node-php.jpg\" alt=\"Distribuzione dell'applicazione dopo l'aggiunta del build pack su Kinsta\" width=\"1999\" height=\"646\"><figcaption class=\"wp-caption-text\">Distribuzione dell&#8217;applicazione dopo l&#8217;aggiunta del build pack su Kinsta<\/figcaption><\/figure>\n<ol start=\"12\">\n<li>Infine, andiamo alla scheda <strong>Processi<\/strong> dell&#8217;applicazione, modifichiamo il processo Web predefinito e sostituiamo il <strong>Comando start<\/strong> con il seguente:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm run build && heroku-php-apache2<\/code><\/pre>\n<figure style=\"width: 1999px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/mykinsta-app-webprocess-details.jpg\" alt=\"Aggiornamento del comando di avvio del processo su Kinsta\" width=\"1999\" height=\"1110\"><figcaption class=\"wp-caption-text\">Aggiornamento del comando di avvio del processo su Kinsta<\/figcaption><\/figure>\n<p>Dopo aver aggiornato il comando di avvio, l&#8217;applicazione verr\u00e0 automaticamente distribuita con il nuovo comando. Una volta che il deploy \u00e8 andato a buon fine, possiamo visitare il dominio per vedere il bellissimo componente scheda che abbiamo creato e iniziare a testare e sviluppare l&#8217;applicazione.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Tailwind aiuta a elevare un progetto Laravel da semplice a perfetto. \u00c8 facile da usare ed evita di digitare enormi quantit\u00e0 di codice solo per ottenere l&#8217;aspetto che desiderate.<\/p>\n<p>Ora che conoscete le basi, esplorate le funzionalit\u00e0 di <a href=\"https:\/\/kinsta.com\/it\/blog\/tailwind-css\/\">Tailwind<\/a> per migliorare l&#8217;aspetto della vostra applicazione con font fantasiosi ed effetti incantevoli. Poi, <a href=\"https:\/\/my.kinsta.com\/login?lang=it\" target=\"_blank\" rel=\"noopener noreferrer\">distribuitela con MyKinsta<\/a> per condividerla con il mondo intero.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ogni sito web Laravel ha bisogno di un po&#8217; di stile e Tailwind CSS \u00e8 il modo pi\u00f9 semplice per dare un tocco di classe a &#8230;<\/p>\n","protected":false},"author":290,"featured_media":72029,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26020],"class_list":["post-72028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-laravel"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come Creare Pagine Bellissime con Tailwind CSS e Laravel<\/title>\n<meta name=\"description\" content=\"Questo tutorial spiega come utilizzare Tailwind CSS per dare un tocco di classe al tuo progetto Laravel e poi distribuirlo con MyKinsta.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come creare pagine bellissime con Tailwind CSS e Laravel\" \/>\n<meta property=\"og:description\" content=\"Questo tutorial spiega come utilizzare Tailwind CSS per dare un tocco di classe al tuo progetto Laravel e poi distribuirlo con MyKinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T16:23:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-08T12:25:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Questo tutorial spiega come utilizzare Tailwind CSS per dare un tocco di classe al tuo progetto Laravel e poi distribuirlo con MyKinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Come creare pagine bellissime con Tailwind CSS e Laravel\",\"datePublished\":\"2023-08-07T16:23:52+00:00\",\"dateModified\":\"2023-08-08T12:25:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/\"},\"wordCount\":1203,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/\",\"name\":\"Come Creare Pagine Bellissime con Tailwind CSS e Laravel\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg\",\"datePublished\":\"2023-08-07T16:23:52+00:00\",\"dateModified\":\"2023-08-08T12:25:59+00:00\",\"description\":\"Questo tutorial spiega come utilizzare Tailwind CSS per dare un tocco di classe al tuo progetto Laravel e poi distribuirlo con MyKinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/laravel\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come creare pagine bellissime con Tailwind CSS e Laravel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Creare Pagine Bellissime con Tailwind CSS e Laravel","description":"Questo tutorial spiega come utilizzare Tailwind CSS per dare un tocco di classe al tuo progetto Laravel e poi distribuirlo con MyKinsta.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/","og_locale":"it_IT","og_type":"article","og_title":"Come creare pagine bellissime con Tailwind CSS e Laravel","og_description":"Questo tutorial spiega come utilizzare Tailwind CSS per dare un tocco di classe al tuo progetto Laravel e poi distribuirlo con MyKinsta.","og_url":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-08-07T16:23:52+00:00","article_modified_time":"2023-08-08T12:25:59+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Questo tutorial spiega come utilizzare Tailwind CSS per dare un tocco di classe al tuo progetto Laravel e poi distribuirlo con MyKinsta.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Marcia Ramos","Tempo di lettura stimato":"7 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Come creare pagine bellissime con Tailwind CSS e Laravel","datePublished":"2023-08-07T16:23:52+00:00","dateModified":"2023-08-08T12:25:59+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/"},"wordCount":1203,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/","url":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/","name":"Come Creare Pagine Bellissime con Tailwind CSS e Laravel","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg","datePublished":"2023-08-07T16:23:52+00:00","dateModified":"2023-08-08T12:25:59+00:00","description":"Questo tutorial spiega come utilizzare Tailwind CSS per dare un tocco di classe al tuo progetto Laravel e poi distribuirlo con MyKinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/08\/laravel-tailwind.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/laravel-tailwind\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Laravel","item":"https:\/\/kinsta.com\/it\/argomenti\/laravel\/"},{"@type":"ListItem","position":3,"name":"Come creare pagine bellissime con Tailwind CSS e Laravel"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/it\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/72028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=72028"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/72028\/revisions"}],"predecessor-version":[{"id":72104,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/72028\/revisions\/72104"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72028\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/72028\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/72029"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=72028"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=72028"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=72028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}