Ogni sito web Laravel ha bisogno di un po’ di stile e Tailwind CSS è il modo più semplice per dare un tocco di classe a un sito. 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.

Tailwind fa parte dello stack TALL, insieme ad Alpine.js e Livewire. La comunità 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.

Questo articolo pratico spiega come utilizzare Tailwind CSS per dare un tocco di classe al proprio progetto Laravel e poi distribuirlo con MyKinsta.

Valorizzare un progetto Laravel con Tailwind

Per iniziare, creiamo una pagina Laravel di base e usiamo Tailwind CSS per abbellirla con il minimo sforzo.

Prerequisiti

Per seguire il tutorial, avremo bisogno di:

Per vedere il progetto finale, date un’occhiata al codice completo del progetto.

Progetto Laravel e configurazione di Tailwind

Per creare un nuovo progetto Laravel utilizzando Composer:

  1. Apriamo il terminale nella directory in cui vogliamo che il progetto risieda ed eseguiamolo:
composer create-project laravel/laravel my-project
  1. Andiamo alla directory my-project per installare i pacchetti necessari:
cd my-project
  1. Installiamo i pacchetti per lavorare con Tailwind:
npm install -D tailwindcss postcss autoprefixer
  1. Eseguiamo il seguente comando per impostare i file di configurazione di Tailwind:
npx tailwindcss init -p

Questa azione inserisce due file nella root del progetto: tailwind.config.js e postcss.config.js.

Configurare i percorsi dei template

  1. Successivamente, configuriamo i percorsi dei template nel file tailwind.config.js. Laravel cerca i file CSS nella directory pubblica per impostazione predefinita. Il percorso del template indica a Laravel dove trovare i file CSS dell’applicazione.
  1. Sostituiamo il codice all’interno del file tailwind.config.js con questo:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

Aggiungere le direttive Tailwind CSS al CSS del progetto

  1. Per aggiungere le direttive CSS di Tailwind, andiamo nella cartella resources/css e apriamo il file app.css.
  1. Quindi, aggiungiamo il seguente codice:
@tailwind base;
@tailwind components;
@tailwind utilities;

Costruire l’applicazione

Prima di eseguire l’applicazione in locale:

  1. Avviamo il server di sviluppo Vite:
npm run dev

Questo comando raggruppa il file di risorse statiche, incluso il CSS di Tailwind, e avviamo il server locale di Vite.

  1. Usiamo Artisan per eseguire l’applicazione Laravel:
php artisan serve

L’applicazione dovrebbe essere in esecuzione all’indirizzo http://127.0.0.1:8000/. Mostra l’output predefinito di un’applicazione Laravel appena creata.

Aprendo il file di route view resources/views/welcome.blade.php, possiamo vedere che utilizza già le classi di utilità di Tailwind.

Come creare un semplice componente Tailwind

Per capire meglio come funziona Tailwind:

  1. Apriamo resources/views/welcome.blade.php.
  1. Cancelliamo il codice dalla vista di benvenuto dell’applicazione.
  1. Sostituiamolo con il codice qui sotto, che renderizza un bellissimo componente scheda:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      @vite('resources/css/app.css')
    <title>Document</title>
  </head>
  <body>
    <div class="max-w-md  m-24 rounded overflow-hidden shadow-lg">
      <img class="w-full" src="https://picsum.photos/400/300" alt="Blog Image">
      <div class="px-6 py-4">
        <h2 class="font-bold text-2xl mb-2">This is My Blog Title</h2>
        <p class="mt-3 text-gray-600 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,
                exercitationem praesentium nihil.
        </p>
        <button class="mt-4 bg-blue-500 text-white font-bold py-2 px-4 rounded">
            Read More
        </button>
      </div>
    </div>
  </body>
</html>

Il codice qui sopra utilizza Vite per importare il file app.css tramite @vite('resources/css/app.css'). Importa anche Tailwind. Crea un componente di markup fondamentale per creare una scheda del blog utilizzando queste classi di utilità CSS di Tailwind:

  • max-w-sm – Imposta la larghezza massima del contenitore alla dimensione del breakpoint sm (piccolo).
  • m-24 – Aggiunge un margine di 24 unità (96px o 6rem) a tutti i lati del contenitore.
  • rounded – Aggiunge un bordo-raggio per rendere gli angoli del contenitore arrotondati.
  • overflow-hidden – Nasconde qualsiasi contenuto che superi il contenitore.
  • shadow-lg – Aggiunge un effetto ombra al contenitore.
  • w-full – Imposta la larghezza dell’immagine al 100% del suo contenitore.
  • px-6 py-4 – Aggiunge un padding di 6 unità (24px o 1,5rem) sull’asse x e di 4 unità (16px o 1rem) sull’asse y.
  • font-bold – Imposta il peso del carattere del testo in grassetto.
  • text-xl – Imposta la dimensione del carattere del testo a extra-large.
  • mb-2 – Aggiunge un margine inferiore di 2 unità (0,5rem o 8px) all’elemento.
  • text-gray-600 – Imposta il colore del testo in grigio scuro.
  • text-base – Imposta la dimensione del carattere del testo come predefinita.

Quando visualizziamo l’anteprima dell’applicazione nel browser, dovremmo vedere un risultato simile a quello qui sotto.

Esempio di componente su una pagina web
Esempio di componente su una pagina web

Distribuire un progetto Laravel Tailwind su Kinsta

Prima di distribuire e ospitare l’applicazione Laravel su Kinsta, apportiamo alcune modifiche per assicurarci che funzioni correttamente quando viene ospitata.

  1. Apriamo app/Http/Middleware/TrustProxies.php. Modifichiamo il valore di protected $proxies per consentire all’applicazione Laravel di fidarsi di tutti i proxy:
protected $proxies = '*';
  1. Creiamo un nuovo file .htaccess nella directory principale del progetto e incolliamo il seguente codice:
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]
</IfModule>
  1. Creiamo un nuovo repository Git e inseriamoci il codice (Kinsta supporta il push da GitHub, GitLab e Bitbucket).
  1. Accediamo al nostro account Kinsta o creamone uno nuovo. Una volta nella dashboard MyKinsta, clicchiamo sul pulsante Aggiungi servizio, quindi selezioniamo Applicazione, come nella schermata qui sotto.
Aggiungere un'applicazione su MyKinsta
Aggiungere un’applicazione su MyKinsta

MyKinsta chiede di collegare l’account Git. Completiamo l’autorizzazione come richiesto, poi selezioniamo il progetto di cui abbiamo precedentemente effettuato il push nel repository e il branch che vogliamo utilizzare.

Configurare i dettagli di una nuova applicazione su Kinsta
Configurare i dettagli di una nuova applicazione su Kinsta
  1. Aggiungiamo l’APP_KEY Laravel nella sezione Variabili d’ambiente. La chiave si trova nel file .env della cartella locale del progetto.
Configurare le variabili d'ambiente dell'applicazione su Kinsta
Configurare le variabili d’ambiente dell’applicazione su Kinsta
  1. Clicchiamo su Continua e selezioniamo l’ambiente di build in base alle nostre preferenze.
  1. Lasciamo per ora vuoto il comando di avvio nella sezione Risorse e clicchiamo su Continua per procedere.
  1. Infine, completiamo le informazioni sul pagamento. La distribuzione inizia immediatamente.

Per eseguire correttamente l’applicazione abbiamo bisogno di due pacchetti di build: PHP per eseguire i comandi php e Node.js per eseguire i comandi npm. Per farlo:

  1. Andiamo all’applicazione e, nella navigazione a sinistra, clicchiamo su Impostazioni.
  1. Clicchiamo su Aggiungi buildpack e aggiungiamo i build pack per Node.js e PHP. Tuttavia, assicuriamoci che il build pack PHP sia aggiunto per ultimo nella sequenza, poiché si tratta di un’applicazione basata su PHP.
  1. Clicchiamo sul pulsante Distribuisci ora che appare dopo aver aggiunto i nuovi pacchetti di build, come illustrato nell’immagine seguente.
Distribuzione dell'applicazione dopo l'aggiunta del build pack su Kinsta
Distribuzione dell’applicazione dopo l’aggiunta del build pack su Kinsta
  1. Infine, andiamo alla scheda Processi dell’applicazione, modifichiamo il processo Web predefinito e sostituiamo il Comando start con il seguente:
npm run build && heroku-php-apache2
Aggiornamento del comando di avvio del processo su Kinsta
Aggiornamento del comando di avvio del processo su Kinsta

Dopo aver aggiornato il comando di avvio, l’applicazione verrà automaticamente distribuita con il nuovo comando. Una volta che il deploy è andato a buon fine, possiamo visitare il dominio per vedere il bellissimo componente scheda che abbiamo creato e iniziare a testare e sviluppare l’applicazione.

Riepilogo

Tailwind aiuta a elevare un progetto Laravel da semplice a perfetto. È facile da usare ed evita di digitare enormi quantità di codice solo per ottenere l’aspetto che desiderate.

Ora che conoscete le basi, esplorate le funzionalità di Tailwind per migliorare l’aspetto della vostra applicazione con font fantasiosi ed effetti incantevoli. Poi, distribuitela con MyKinsta per condividerla con il mondo intero.

Marcia Ramos Kinsta

Sono l'Editorial Team Lead di Kinsta. Sono un'appassionata di open source e amo il coding. Con più di 7 anni di esperienza in scrittura tecnica e di editing per l'industria tecnologica, amo collaborare con le persone per creare contenuti chiari e concisi e migliorare i flussi di lavoro.