TailwindCss setup on Laravel project

C'è una spiegazione non aggiornata nella pagina ufficiale di Tailwind.

Assicuriamoci di avere sotto mano un progetto Laravel su cui lavorare (se vuoi approfondire leggi qua).

composer create-project --prefer-dist laravel/laravel tailwindcss

Dopo che Composer ha terminato di installare il progetto Laravel siamo pronti per integrare TailwindCss.

Le dipendenze

Ci sono due modi per farlo.

Il primo modo utilizza npm per installare direttamente la dipendenza ed aggiornare il package.json (non è strettamente necessario installare anche autoprefixer).

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Una volta che le dipendenze sono state installate potete proseguire con il secondo step.

Il secondo modo è quello di scrivere direttamente le dipendenze sul file package.json ed eseguire l'installazione dei pacchetti quando lo volete fare.

Se il progetto su cui sto lavorando è versionato preferisco questo secondo metodo perchè mi da maggiore controllo sulle commits anche se in fondo cambia molto poco.

package.json

{
    "scripts": {
        "..."
    },
    "devDependencies": {
        "...",
        "postcss": "^8.2.1",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.30.0",
        "sass-loader": "^8.0.2",
        "tailwindcss": "^2.0.1",
        "..."
    }
}

Installazione

Ora che le dipendenze sono state dichiarate si può procedere all'installazione.

npm install

Setup

A questo punto abbiamo le dipendenze al posto giusto possiamo iniziare il setup di Tailwind.

Dobbiamo creare il file di configurazione all'interno della cartella resources/js/, inserire le direttive Tailwind per la costruzione del file css ed istruire Laravel Mix su come deve fare per eseguire la build.

npx tailwindcss init

Questo comando serve per creare il file di configurazione di Tailwind. Una volta che avete il file lo potete muovere nella cartella resources/js/tailwind.config.js se non lo avere già creato all'interno di essa.

Ora possiamo aggiornare il file app.css già presente nel progetto dentro la folder resources/css/ o creare un file app.scss su una nuova cartella resources/scss/.

resources/scss/app.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

Building

Come ultimo step dobbiamo istruire Laravel Mix su come deve fare ad eseguire la build pubblica.

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require("tailwindcss");

//... if you use sass file like me

mix.sass("resources/scss/app.scss", "public/css").options({
    processCssUrls: false,
    postCss: [tailwindcss("./resources/js/tailwind.config.js")]
});

//... if you use css file

mix.postCss("resources/css/app.css", "public/css", [
     require("tailwindcss"),
]);

Memo

Good, we're done!

Ah, non dimenticatevi di inserire il file pubblico generato all'interno del vostro template di layout generale.

resources/views/components/layout.blade.php

<html>
    <head>
        <link rel="stylesheet" href="{{ asset('css/app.css') }}" />
    </head>

    <body></body>
</html>

Se non sai come si fa a generare il file pubblico: in ambiente di test puoi utilizzare questa direttiva direttamente dal terminale.

npm run dev

← Inizializzare un progetto Laravel - HTTPS su infrastruttura AWS dietro Load Balancer →