Dall'archivio script > HTML5

Utilizzare Tailwind CSS all'interno di React: installazione

di Morgan PizziniMorgan Pizzini, in HTML5, CSS,

In questa serie di script ci occuperemo della configurazione di un'applicazione React al cui interno useremo TailwindCSS come framework CSS. Iniziamo dunque a parlare di Tailwind.

Tailwind CSS è un framework CSS che offre un approccio diverso rispetto ai tradizionali framework. In questa prima parte della serie, esploreremo le basi di Tailwind CSS e forniremo istruzioni su come installarlo all'interno di una web app statica.

Tailwind CSS è progettato per semplificare la creazione di interfacce utente, fornendo classi atomiche di utilità che coprono ogni aspetto del design, queste possono essere combinate tra loro per ottenere stili personalizzati. A differenza dei framework CSS convenzionali, Tailwind non fornisce componenti predefiniti.

I benefici di Tailwind sono dunque:

  • Flessibilità: avendo classi modulari il progetto potrà adattarsi ad ogni tipo di interfaccia utente;
  • Riduzione del CSS ridondante: si applicano solo le classi necessarie;
  • Velocità di sviluppo: La rapidità nell'applicare stili attraverso classi, senza dover scandagliare il codice CSS per trovare il giusto elemento, accelera il processo di sviluppo.

    • Prima di passare alla sua implementazione all'interno di React, vediamone un esempio in una web app statica (HTML/JS/CSS).

    La cartella dovrà essere inizializzata tramite npm init -y, per creare il file package.json, dato che Tailwind CSS si basa su Node.js per la gestione delle dipendenze.

    $ npm install tailwindcss postcss-cli autoprefixer

    In questo momento abbiamo installato tre diversi pacchetti che ci aiuteranno a creare il file CSS finale e a gestire le classi che utilizzeremo. Procediamo creando un file postcss.config.js nella radice del nostro progetto. Questo file conterrà l'insieme di regole con cui il compilatore dovrà gestire le classi. Aggiungiamo al file il seguente contenuto:

    // postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

    A questo punto, eseguiamo il comando per creare un file di configurazione di Tailwind:

    $ npx tailwindcss init -p

    ```
    Creiamo ora uno stile di base tramite un file nominato styles.css nella nostra directory e aggiungiamo il seguente codice.

    /* styles.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

    A valle di queste righe possiamo inserire il nostro CSS personalizzato.

    L'ultima operazione da eseguire è la creazione di file CSS utilizzabile, dato che i termini @import non verranno risolti dal browser. A questo proposito, all'interno del package.json, nella sezione script, aggiungiamo queste righe.

    // package.json
"scripts": {
  "build:css": "postcss styles.css -o public/styles.css",
  "watch:css": "postcss styles.css -o public/styles.css --watch"
}

    Eseguiamo il seguente comando per compilare i nostri stili Tailwind.

    $ npm run build:css

    Il procedimento creerà un file public/styles.css al quale punteremo tramite il seguente HTML.

    <!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Web App con Tailwind CSS</title>
</head>
<body>
  <!-- Contenuto della nostra Web App -->
</body>
</html>

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi