Tailwind CSS senza Node.js

Installazione

Per usare TailwindCSS senza Node.js dobbiamo innanzitutto scaricarlo. In questo tutorial utilizzerò il package manager Scoop:

scoop install tailwindcss

Installazione senza Scoop

Se non volete utilizzare scoop potete scaricare Tailwind direttamente dalla loro repo github. Scarichiamo il file, installiamolo e aggiungiamo il path dell'eseguibile alle variabili di sistema Windows. Così facendo possiamo chiamarlo ovunque senza doverci ricordare il path assoluto.

Inizializzazione

Inizializziamo tailwind nel nostro progetto con il seguente comando:

tailwindcss init

Ora troveremo nel nostro progetto il file tailwind.config.js. Andiamolo a modificare inserendo in content i path dei file in cui tailwind dovrà ricercare le classi che inseriremo:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,php}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

In questo caso ho inserito tutte i file con estensione .html o .php presenti nelle cartelle figlie di src.

Creare il file di input CSS

Inserite nel vostro main file css le direttive che servono a Tailwind:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

In questo caso tailwind non funzionerà correttamente se userete @tailwind anziché @import

Launch

Lanciamo tailwind con il seguente comando:

tailwindcss -i ./src/input.css -o ./src/output.css --watch

-i sta per input file e il path seguente punta al nostro main file css contenente le direttive aggiunte nel passaggio precedente. Invece -o sta per output e quello che segue è il path del file che tailwind andrà a creare o modificare ogni volta che inseriremo una classe. Invece --watch serve a indicare di monitorare le modifiche e di ricostruire il file output.css in caso di necessità.

Conclusione

Non ci resta che installare l'estensione di tailwindcss per il nostro editor preferito in modo da avere l'autocomplete per le classi css.

---

Spero questa guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub