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'; // ...
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database
Creare una libreria CSS universale - Rotazione degli elementi
Il nuovo controllo Range di Blazor 9
.NET Aspire per applicazioni distribuite
Utilizzare i variable font nel CSS
Introduzione ai web component HTML
Utilizzare Container Queries nominali
Utilizzare WhenEach per processare i risultati di una lista di task
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Recuperare l'ultima versione di una release di GitHub
Eseguire script pre e post esecuzione di un workflow di GitHub
Creare una custom property in GitHub