Una guida per principianti ai CSS Tailwind in React

Stanchi dei framework CSS supponenti? Cerchi un'opzione solida che ti dia la libertà di creare? Prova Tailwind CSS.

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é utilizzare i CSS Tailwind?

Esistono già molti framework CSS 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, nel senso 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.

Tailwind CSS, tuttavia, è un framework di utilità che ti offre il controllo creativo per creare componenti dinamici. E a differenza di Bootstrap, puoi personalizzare facilmente i design come preferisci.

Un altro vantaggio dell'utilizzo di Tailwind CSS è che ti ritroverai con una dimensione del bundle CSS ridotta poiché rimuove tutti i CSS inutilizzati durante il processo di compilazione (che è diverso da Bootstrap, poiché include tutti i file CSS nella compilazione).

Scopri di più sulle 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 utilizzare pienamente le classi di utilità e potrebbe essere necessario fare spesso riferimento alla documentazione. Tuttavia, dopo aver acquisito familiarità con le classi, lo troverai più semplice e veloce rispetto ai semplici CSS.

Alla maggior parte degli sviluppatori piace seguire il principio di 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 prendere seriamente in considerazione se hai già dimestichezza con i CSS e desideri creare progetti più velocemente.

Per iniziare: crea un progetto React

Esegui il comando seguente nel terminale per impalcare un'applicazione React utilizzando create-react-app.

npx create-react-app react-tailwind

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

Il comando precedente crea una nuova cartella denominata react-tailwind. Passare alla cartella e aprirla utilizzando l'editor di testo preferito.

cd react-tailwind

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

Utilizza Tailwind CSS in React

Installa Tailwind CSS e le sue dipendenze con questo comando:

npm install tailwindcss postcss autoprefixer

PostCSS utilizza plugin JavaScript per rendere CSS compatibile 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 plugin PostCSS che utilizza i valori di caniuse.com per aggiungere automaticamente i prefissi dei fornitori alle regole CSS.

Inizializza il CSS Tailwind

Esegui il comando tailwind init per generare file di configurazione predefiniti 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:

module.exports = {
 content: [],
 theme: {
   extend: {},
 },
 plugins: [],
}

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 inutilizzate e quindi di ridurre la dimensione del CSS generato.

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

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

Inietta CSS Tailwind in React

Il passaggio successivo consiste nell'includere Tailwind CSS nell'applicazione utilizzando le direttive @tailwind.

Elimina tutto in index.css e aggiungi quanto segue per importare stili di base, componenti e utilità.

@tailwind base;
@tailwind components;
@tailwind utilities;

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

Utilizzo di Tailwind CSS per definire lo stile di un componente React

Creerai la semplice pagina web di seguito e le darai uno stile utilizzando le classi di utilità di Tailwind.

Questa pagina contiene due sezioni principali: una barra di navigazione e la sezione degli eroi (che ha un'intestazione e un pulsante).

Per illustrare come Tailwind CSS semplifica la scrittura di CSS, prova a definire uno stile per la pagina Web utilizzando semplici CSS e Tailwind CSS.

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

import './App.css'
function App() {
 return (
   <div className='app'>
   </div>
 );
}
export default App;

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

import "./App.css";
function App() {
 return (
   <div className="wrapper">
     <nav>
       <div className="logo">Tailwind CSS</div>
       <ul>
         <li>Install</li>
         <li>Docs</li>
       </ul>
     </nav>
     <div className="hero">
       <h1 className="header">
         Tailwind CSS makes styling React components easier!
       </h1>
       <button className="btn">Get Started</button>
     </div>
   </div>
 );
}

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

nav {
 display: flex;
 justify-content: space-between;
 padding: 16px 36px;
 color: #000;
 box-shadow: 0px 2px 5px 0px rgba(168, 168, 168, 0.75);
}
.logo {
 font-size: 18px;
 font-weight: bold;
}
ul {
 list-style: none;
 display: inline-flex;
}
ul li {
 margin-left: 16px;
 cursor: pointer;
}
.hero {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-top: 64px;
}
h1 {
 font-size: 36px;
 text-align: center;
}
.btn {
 background-color: #000000;
 color: #fff;
 padding: 10px;
 width: fit-content;
 margin-top: 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 desideri creare un pulsante con uno sfondo nero e il colore del testo bianco, devi utilizzare le classi di utilità bg-black e text-white .

App.js dovrebbe assomigliare a questo.

function App() {
 return (
   <div>
     <Navbar />
     <div className="flex flex-col items-center mt-16">
       <h1 className="text-4xl text-center">
         Tailwind CSS makes styling React components easier!
       </h1>
       <button className="bg-black text-white p-2.5 w-fit mt-9 ">
         Get Started
       </button>
     </div>
   </div>
 );
}

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

Rispetto ai semplici CSS, questo approccio si traduce in meno codice facile da capire.

Codice con stile con Tailwind CSS

In questo articolo hai imparato a conoscere Tailwind CSS, i suoi punti di forza, gli svantaggi e come utilizzare 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 non è l’unico framework CSS sul mercato. Quale utilizzerai per il tuo prossimo progetto?