Se vuoi dare uno stile alle tue app con un framework veloce, flessibile e affidabile, Tailwind CSS è un'ottima opzione. Tailwind è un framework CSS che ti aiuta a progettare componenti web personalizzati. Puoi progettare componenti senza dover passare da un file HTML a un file CSS e viceversa.

A differenza di Bootstrap, Tailwind non ha classi predefinite. Invece, puoi personalizzare il tuo. Con Tailwind, puoi creare componenti complessi con utilità, funzioni e direttive primitive.

Scopri come installare e utilizzare Tailwind per creare fantastiche interfacce utente nei tuoi progetti Next.js.

Installa Tailwind CSS in Next.js

Inizia installando Tailwind in un'applicazione Next.js. Il processo è simile a installare Tailwind in un'app React, con una piccola differenza nel processo di configurazione.

Vai al Installazione CSS Tailwind pagina. Quindi vai al Guide quadro sezione e selezionare

Next.js. Questa sezione contiene tutte le istruzioni necessarie per configurare Tailwind nel tuo progetto Next.js.

Per installare Tailwind tramite npm, il gestore di pacchetti JavaScript, esegui questi due comandi da terminale:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Questi comandi creano due file di configurazione denominati tailwind.config.js E postcss.config.js nella cartella principale del progetto. Questi file indicano che TailwindCSS è stato installato correttamente. Puoi anche installare Tailwind CSS tramite l'interfaccia a riga di comando di Tailwind o come plug-in PostCSS.

Configura modelli

Dopo l'installazione, è necessario configurare i percorsi del modello forniti nella guida all'installazione nel file di configurazione dell'app. Aggiungere il seguente codice al file file tailwind.config.js:

/** @tipo {import('tailwindcss').Config}*/
modulo.esporta = {
 contenuto: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./componenti/**/*.{js, ts, jsx, tsx}",
// O se si utilizza la directory `src`: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 tema: { 
 estendere: {},
 },
 plugin: [],
}

Aggiungi la direttiva Tailwind all'app

Successivamente, aggiungi le seguenti direttive Tailwind al file CSS dell'app. Questo è il file denominato globale.css. Devi eliminare il contenuto del file global.css e aggiungere le direttive Tailwind.

@base del vento in poppa;
componenti @tailwind;
utilità @tailwind;

Esegui il processo di creazione

Ora, sul terminale, esegui lo strumento CLI con il seguente comando:

npm esegue lo sviluppo

Questo comando esegue la scansione dei file modello per le classi e crea il tuo CSS. Si aprirà una porta per visualizzare il browser.

Ora, se accedi al server in http://localhost: 3000 vedrai la tua app. Dovresti notare un leggero cambiamento nel contenuto. Ciò indica che il processo di installazione è andato a buon fine e che Tailwind CSS è attivo.

Usa Tailwind nel progetto

Successivamente, testiamo le funzionalità CSS di Tailwind applicando le classi al tuo progetto. Ad esempio, hai un'app con il testo "Hello Tailwind". Vuoi dargli un colore rosso con uno sfondo azzurro.

Creare un Home.tsx file quindi aggiungere il seguente codice:

esportarepredefinitofunzioneCasa() {
ritorno (
"bg-blu-300">
'testo-rosso-900'>Ciao Tailwind CSS</h1>
 </body>
 );
} 

Ora, quando navighi nel browser, vedrai il testo cambiato in rosso e lo sfondo blu.

Puoi esplorare altre funzionalità CSS di Tailwind per dare uno stile ad altri componenti della tua app. I modificatori condizionali ti consentono di creare stati reattivi come hover e focus. Puoi anche personalizzare le tue pagine in modalità scura e chiara in base alle preferenze dell'utente.

Vantaggi dell'utilizzo di Tailwind CSS

Realizzato da Adam Wathan nel 2017, Tailwind CSS differisce dalle altre librerie CSS in molti modi. Ha un tempo di esecuzione pari a zero, il che lo rende velocissimo. Ed è facile da installare. Tailwind analizza tutti i file HTML e i componenti JavaScript per i nomi delle classi sulla tua app. Quindi genera gli stili corrispondenti che disegnano gli elementi.

Tailwind CSS ti consente di progettare componenti complessi da utilità primitive. Puoi riutilizzare gli stili tra i componenti e utilizzare i modificatori per definire lo stile delle interfacce utente reattive. Usa i passaggi qui per scoprire come installare e utilizzare Tailwind CSS per personalizzare le app che corrispondono al tuo brand.