Tailwind CSS è un primo framework CSS di utilità che consente agli sviluppatori di progettare componenti Web personalizzati senza passare a un file CSS. In questo tutorial imparerai come installare Tailwind CSS in React e come utilizzarlo per creare una semplice pagina React.

Perché usare Tailwind CSS?

Ce ne sono già molti CSS framework che semplificano il modo in cui gli sviluppatori progettano le pagine web. Allora perché dovresti usare Tailwind CSS?

I framework CSS come Bootstrap e Foundation sono framework supponenti, il che significa che forniscono agli sviluppatori componenti predefiniti con stili predefiniti. Ciò limita sia la personalizzazione che la creatività e ti ritroverai con siti Web che sembrano piuttosto generici.

CSS in coda, tuttavia, è un framework utility-first che ti offre il controllo creativo per creare componenti dinamici. E a differenza di Bootstrap, puoi facilmente personalizzare i design a tuo piacimento.

Un altro vantaggio dell'utilizzo di Tailwind CSS è che si ottiene una piccola dimensione del bundle CSS poiché rimuove tutti i CSS inutilizzato durante il processo di compilazione (che è diverso da Bootstrap, poiché include tutti i file CSS nel file costruire).

Ulteriori informazioni sul differenze tra Tailwind CSS e Bootstrap dal nostro articolo sull'argomento.

Svantaggi dell'utilizzo di Tailwind CSS

Tailwind CSS ha una curva di apprendimento ripida anche per gli sviluppatori esperti. Ci vuole del tempo per imparare a usare completamente le classi di utilità e potrebbe essere necessario fare riferimento spesso alla documentazione. Tuttavia, dopo aver acquisito familiarità con le classi, lo troverai più facile e veloce rispetto al semplice CSS.

Alla maggior parte degli sviluppatori piace seguire il principio della separazione delle preoccupazioni in modo tale che i file CSS e HTML siano scritti in file diversi. Con Tailwind CSS, scrivi il CSS direttamente nel markup HTML, uno svantaggio per alcuni.

Anche con questi svantaggi, Tailwind CSS è un framework che dovresti considerare seriamente se sei già a tuo agio con CSS e desideri creare progetti più velocemente.

Per iniziare: creare un progetto React

Esegui il seguente comando nel terminale per l'impalcatura a Reagire applicazione utilizzando creare-reagire-app.

npx create-react-app react-tailwind

creare-reagire-app fornisce un modo semplice per creare un'app React senza configurare strumenti di compilazione come webpack, babel o linters. Ciò significa che in pochi minuti ti ritroverai con un ambiente React funzionante.

Il comando precedente crea una nuova cartella denominata reagire con vento in poppa. Passa alla cartella e aprila utilizzando il tuo editor di testo preferito.

cd react-tailwind

Quindi, installa Tailwind CSS e configuralo per funzionare con l'applicazione React.

Usa Tailwind CSS in React

Installa Tailwind CSS e le sue dipendenze con questo comando:

npm installa il prefissore automatico postcss di tailwindcss

PostCSS utilizza plugin JavaScript per rendere i CSS compatibili con la maggior parte dei browser. Controlla il browser in cui è in esecuzione l'applicazione e determina i polyfill necessari per far funzionare perfettamente il tuo CSS. Autoprefixer è un plug-in PostCSS che utilizza i valori da caniuse.com per aggiungere automaticamente i prefissi dei fornitori alle regole CSS.

Inizializza Tailwind CSS

Corri il init del vento in coda comando per generare i file di configurazione predefiniti di Tailwind CSS.

npx tailwindcss init

Questo crea tailwind.config.js nella cartella principale che memorizza tutti i file di configurazione di Tailwind e contiene quanto segue:

modulo.esportazioni = {
 contenuto: [],
 tema: {
 estendere: {},
 },
 plugin: [],
}

Configura percorsi modello

Devi indicare a Tailwind CSS i file che dovrebbe controllare per vedere quali classi CSS vengono utilizzate. Ciò consente a Tailwind di identificare e rimuovere le classi non utilizzate e quindi riduce la dimensione del CSS generato.

Nel tailwind.config.js, aggiungi i percorsi del modello sotto la chiave del contenuto.

modulo.esportazioni = {
 contenuto: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 tema: {
 estendere: {},
 },
 plugin: [],
}

Iniettare Tailwind CSS in React

Il passaggio successivo consiste nell'includere Tailwind CSS nell'applicazione che utilizza @windwind direttive.

Cancella tutto dentro index.css e aggiungi quanto segue per importare gli stili di base, i componenti e le utilità.

@base di vento in coda;
componenti @tailwind;
utilità @tailwind;

Infine, assicurati index.css è importato index.js e Tailwind CSS sarà pronto per l'uso.

Utilizzo di Tailwind CSS per lo stile di un componente React

Creerai la semplice pagina web di seguito e la modellerai utilizzando le classi di utilità di Tailwind.

Questa pagina contiene due sezioni principali: a barra di navigazionee la sezione dell'eroe (che ha un'intestazione e un pulsante).

Per illustrare come Tailwind CSS semplifichi la scrittura di CSS, prova a creare uno stile della pagina Web utilizzando CSS semplici e Tailwind CSS.

Inizia modificando il App.js nel src cartella per rimuovere il codice non necessario.

importa './App.css'
funzione App() {
 Restituzione (



 );
}
esporta l'app predefinita;

Quindi, aggiungi il contenuto della pagina web a App.js.

importa "./App.css";
funzione App() {
 Restituzione (







 Tailwind CSS semplifica lo styling dei componenti React!



Iniziare






 );
}

Per utilizzare CSS semplici, aggiungi il CSS a App.css.

nav {
 display: flessibile;
 giustificare-contenuto: spazio di mezzo;
 imbottitura: 16px 36px;
 colore: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 dimensione del carattere: 18px;
 font-weight: grassetto;
}
ul {
 stile elenco: nessuno;
 display: inline-flex;
}
tu li {
 margine sinistro: 16px;
 cursore: puntatore;
}
.eroe {
 display: flessibile;
 direzione flessibile: colonna;
 allineare-elementi: centro;
 margine superiore: 64px;
}
h1 {
 dimensione del carattere: 36px;
 allineamento testo: centro;
}
.btn {
 colore di sfondo: #000000;
 colore: #fff;
 imbottitura: 10px;
 larghezza: fit-content;
 margine superiore: 36px;
}

Con Tailwind CSS, non è necessario scrivere le regole CSS per ogni classe. Invece, usi le classi di utilità. Queste sono classi con ambito a una singola proprietà CSS. Ad esempio, se vuoi creare un pulsante con uno sfondo nero e il colore del testo bianco, devi utilizzare il bg-nero e testo-bianco classi di utilità.

App.js dovrebbe assomigliare a questo.

funzione App() {
 Restituzione (







 Tailwind CSS semplifica lo styling dei componenti React!




 Iniziare







 );
}

Non è necessario importare App.css poiché gli stili generati da Tailwind CSS sono archiviati in index.css in cui hai importato index.js prima.

Rispetto al semplice CSS, questo approccio si traduce in meno codice facile da capire.

Codice in stile con Tailwind CSS

In questo articolo, hai imparato a conoscere Tailwind CSS, i suoi punti di forza, gli svantaggi e come puoi usare le sue classi di utilità nelle applicazioni React. Oltre alle classi, Tailwind CSS offre anche altre funzionalità aggiuntive, inclusa la possibilità di creare layout reattivi e componenti riutilizzabili.

Ma, come accennato in precedenza, Tailwind è tutt'altro che l'unico framework CSS sul mercato. Quale utilizzerai per il tuo prossimo progetto?

Tailwind CSS vs. Bootstrap: qual è un framework migliore?

Quando si sceglie un framework CSS è importante trovare quello che soddisfi le proprie esigenze.

Leggi Avanti

Circa l'autore