Passa al contenuto

Tailwind CSS

Contenuto

Panoramica

Tailwind CSS è un Framework CSS che si distingue per il suo approccio Utility-First. Non dispone di componenti pronti all'uso ma fornisce delle classi predefinite per applicare gli stili CSS direttamente nel markup HTML. Il vantaggio principale è quello di non perdere tempo nell'inventarsi nomi di classi fantasiosi e allo stesso tempo permette di definire un design system completamente personalizzato ma vincolato a valori predefiniti.

Superato il primo impatto, Tailwind CSS permette di creare velocemente prototipi di pagine o elementi HTML. Ma non si limita a questo, può essere usato anche in progetti complessi con il notevole vantaggio che qualsiasi programmatore che conosce Tailwind CSS è in grado di comprendere gli stili applicati ai vari elementi leggendo direttamente il markup HTML.

Per iniziare

Il modo più semplice e veloce per iniziare a utilizzare Tailwind CSS da zero è con lo strumento Tailwind CLI (l'interfaccia a riga di comando di Tailwind CSS).

  1. Installa Tailwind CSS
    Installa tailwindcss tramite npm e crea il file tailwind.config.js

    Terminale

    npm install -D tailwindcss
npx tailwindcss init

  2. Configura i percorsi dei modelli
    Aggiungi i percorsi a tutti i tuoi modelli nel file tailwind.config.js. Se utilizzi le classi di Tailwind CSS in altri file, ad esempio in file javascript, aggiungi anche i percorsi di questi file.

    tailwind.config.js

    module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

  3. Aggiungi le direttive Tailwind al tuo CSS
    Aggiungi le direttive @tailwind per ciascuno dei layer di Tailwind al tuo file CSS principale.

    src/input.css

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

  4. Avvia il processo di compilazione di Tailwind CLI
    Esegui lo strumento CLI per cercare le classi utilizzate nei tuoi modelli e creare il corrispondente codice CSS. Utilizza l'opzione --watch per indicare a Tailwind CLI di ricompilare il file CSS in caso di modifiche ai modelli.

    Terminale

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

  5. Aggiungi le utility di Tailwind direttamente nel tuo markup HTML
    Aggiungi il tuo file CSS compilato nella sezione <head> e inizia a utilizzare le classi di utilità di Tailwind per definire lo stile del tuo contenuto.

    src/index.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

Risorse utili (siti esterni)

Credit: alcune informazioni sono state tradotte e adattate dal sito ufficiale di Tailwind CSS

Hai trovato un errore? Modifica questa pagina su GitHub!

Questo articolo ti è piaciuto? Condividilo!