Tailwind CSS può essere incorporato anche all'interno di Single Page Application come React. Il processo risulta molto semplice grazie alle ottimizzazioni della piattaforma e al sistema di compilazione integrato.

Cominciamo creando un nuovo progetto React utilizzando create-react-app, uno strumento che semplifica notevolmente la creazione del template iniziale per l'applicazione.

npx create-react-app la-mia-app-react 
cd la-mia-app-react

Come per la versione HTML, utilizziamo npm per installare i pacchetti necessari a Tailwind CSS:

npm install tailwindcss postcss-cli autoprefixer

Proseguiamo creando la configurazione, eseguendo il comando:

npx tailwindcss init -p

La prima cosa da fare è informare correttamente Tailwind CSS riguardo la posizione dei nostri file tramite il tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  // ...
}

A questo punto non rimane altro che configurare PostCSS. Creiamo dunque un file postcss.config.js con il seguente contenuto:

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

Ora sta a noi: possiamo importare Tailwind CSS direttamente nel file index.css, oppure, crearne uno nuovo in cui scrivere tutte le customizzazioni relative al tema, chiamato nel nostro caso styles.css, a patto che venga poi correttamente referenziato in index.js.

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

/* src/index.js */
import './styles.css';
// ...