CSS framework hanno cambiato il modo in cui gli sviluppatori affrontano lo sviluppo web fornendo componenti e stili predefiniti. Tuttavia, molti framework presentano design opinabili e fogli di stile ingombranti che limitano la personalizzazione.
Tailwind CSS adotta un approccio diverso. Come framework CSS basato sulle utility, fornisce classi di utilità di basso livello che permettono agli sviluppatori di realizzare design personalizzati senza essere vincolati da componenti predefiniti.
Con oltre 675.375 siti web che utilizzano Tailwind CSS e oltre 8,61 milioni di repository dipendenti, Tailwind è diventato ben più di un semplice framework CSS.
In questo articolo, esamineremo la comprensione dei concetti di Tailwind CSS, il processo di configurazione e l’uso pratico, così potrai iniziare a costruire le tue bellissime interfacce utente personalizzate senza dover imparare CSS.
Inizia ora!
Cos’è Tailwind CSS?
Tailwind CSS è un framework CSS altamente personalizzabile e di basso livello che fornisce un insieme di classi di utilità per costruire rapidamente interfacce utente personalizzate. È stato sviluppato e rilasciato per la prima volta da Adam Wathan nel 2017.
Da allora, Tailwind ha registrato una traiettoria ascendente nel numero di siti web realizzati utilizzando la libreria Tailwind.
Sebbene la crescita sembri attualmente rallentata secondo i grafici di BuiltWith, il Framework viene regolarmente aggiornato con nuove funzionalità, classi e altro ancora.
Secondo i dati sullo stack tecnologico di BuiltWith, oltre 100.000 siti web solo negli Stati Uniti utilizzano Tailwind per costruire le loro interfacce utente, insieme al Regno Unito, Indonesia, Germania e altri paesi che rientrano nei primi 10 utilizzatori di questa libreria.
La filosofia principale dietro Tailwind CSS è fornire agli sviluppatori un insieme di blocchi di costruzione anziché componenti pre-costruiti. Questi blocchi di costruzione sono classi di utilità piccole e monouso che possono essere combinate per creare layout complessi e reattivi.
Questo approccio permette una maggiore flessibilità e controllo sul design, poiché puoi personalizzare ogni aspetto della tua interfaccia utente senza essere limitato dagli stili predefiniti del framework.
Cosa Rende Tailwind CSS Diverso?
Tradizionalmente, quando si lavora con CSS, gli sviluppatori scrivono classi personalizzate in fogli di stile separati per stilizzare i loro elementi HTML. Questo approccio può portare a grandi file CSS e rendere la manutenzione e l’aggiornamento degli stili in un progetto difficile.
Tailwind offre un insieme completo di classi di utilità che possono essere applicate direttamente agli elementi HTML. Queste classi sono altamente componibili, permettendo agli sviluppatori di creare design complessi e personalizzati senza scrivere nemmeno una riga di CSS personalizzato.
Ad esempio, invece di scrivere una classe CSS personalizzata per stilizzare un pulsante, puoi usare le classi predefinite di Tailwind così:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Pulsante
</button>Questo approccio presenta diversi vantaggi:
- Sviluppo Più Rapido: Le classi predefinite aiutano gli sviluppatori a costruire e iterare rapidamente sui design senza dover continuamente passare tra HTML e file CSS.
- Stile Coerente: Tailwind fornisce un insieme standardizzato di classi, che aiuta a mantenere la coerenza nel design in tutto il progetto.
- File CSS Più Piccoli: Poiché gli stili sono applicati direttamente nell’HTML, non c’è bisogno di grandi file CSS personalizzati.
- Manutenzione Più Semplice: Con gli stili definiti nell’HTML, è più facile vedere come le modifiche influenzeranno un elemento specifico senza dover cercare tra file CSS separati.
- Migliore Performance: Molti moderni sistemi di stile come Emotion o Styled Components si affidano a javascript (solitamente durante l’esecuzione, con prestazioni più lente) per rendere il tuo css. Tailwind è solo CSS alla fine dei conti.
Tailwind mi ha trasformato in uno sviluppatore full stack ?
”— Boris Lepikhin
Per Iniziare Con Tailwind CSS
Prima di passare agli esempi, impostiamo un progetto di base con Tailwind CSS. Presumeremo che tu abbia una certa familiarità con HTML e CSS. Inoltre, devi avere npm installato sul tuo sistema. Una volta fatto, sei pronto per procedere!
Crea una nuova cartella per il tuo progetto e accedivi:
mkdir my-tailwind-project
cd my-tailwind-projectInizializza un nuovo progetto npm e installa Tailwind CSS:
npm init -y
npm install -D tailwindcssCrea un file tailwind.config.js:
npx tailwindcss initCrea un file input.css e aggiungi quanto segue:
@tailwind base;
@tailwind components;
@tailwind utilities;Aggiorna il tuo file tailwind.config.js per elaborare il tuo input.css:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}Crea un file index.html in una directory src e aggiungi quanto segue:
<!DOCTYPE html>
<html>
<head>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold text-center mt-4">Benvenuto in Tailwind CSS!</h1>
</body>
</html>Costruisci il tuo CSS:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watchOra, quando apri index.html nel tuo browser, dovresti vedere un’intestazione grande e in grassetto che dice Benvenuto in Tailwind CSS!
Congratulazioni, hai configurato il tuo primo progetto Tailwind!
Classi di Utilità di Tailwind CSS
Tailwind CSS offre una vasta gamma di classi di utilità che coprono vari aspetti dello stile, come il layout, lo spazio, la tipografia, i colori e altro ancora. Queste classi seguono una convenzione di denominazione che rende intuitivo comprendere il loro scopo.
Esploriamo alcune classi di utilità comunemente usate in Tailwind CSS.
Classi di Layout di Tailwind
- flex: Applica un contenitore flex.
- grid: Applica un contenitore grid.
- block: Mostra un elemento come un elemento di livello block.
- inline: Mostra un elemento come un elemento di livello inline.
Esempio:
<div class="flex">
<div>Articolo 1</div>
<div>Articolo 2</div>
</div>Classi di Spaziatura di Tailwind
- m-{size}: Applica margine su tutti i lati.
- p-{size}: Applica imbottitura su tutti i lati.
- mx-{size}: Applica margine a sinistra e a destra.
- py-{size}: Applica imbottitura in alto e in basso.
Esempio:
<div class="m-4 p-2">
Contenuto con margine e padding
</div>Classi di Tipografia Tailwind
- text-{size}: Imposta la dimensione del font.
- font-{weight}: Imposta il peso del font.
- text-{color}: Imposta il colore del testo.
- uppercase, lowercase, capitalize: Trasforma il caso del testo.
Esempio:
<p class="text-lg font-bold text-blue-500 uppercase">
Testo Stilizzato
</p>Colori Tailwind
Tailwind CSS offre una palette di colori predefinita che può essere personalizzata. I colori sono definiti utilizzando una combinazione del nome del colore e della tonalità.
- bg-{color}-{shade}: Imposta il colore dello sfondo.
- text-{color}-{shade}: Imposta il colore del testo.
- border-{color}-{shade}: Imposta il colore del bordo.
Esempio:
<button class="bg-blue-500 text-white border-2 border-blue-700">
Pulsante
</button>Classi Tailwind Per Design Responsivo
Tailwind rende facile creare design reattivi fornendo varianti responsive per la maggior parte delle sue classi di utilità. Queste varianti ti permettono di specificare stili diversi per diverse dimensioni di schermo.
Tailwind utilizza un approccio mobile-first, dove gli stili di base vengono applicati a tutte le dimensioni dello schermo, e poi le dimensioni di schermo più grandi sono targetizzate usando prefissi responsive:
- sm: Applica stili agli schermi piccoli e superiori (640px in su).
- md: Applica stili agli schermi medi e superiori (768px in su).
- lg: Applica stili agli schermi grandi e superiori (1024px in su).
- xl: Applica stili agli schermi molto grandi e superiori (1280px in su).
- 2xl: Applica stili agli schermi extra-extra grandi e superiori (1536px in su).
Per utilizzare queste varianti responsive, basta anteporre la classe di utilità con la dimensione dello schermo desiderata:
<div class="bg-blue-500 md:bg-green-500 lg:bg-red-500">
<!-- Contenuto -->
</div>In questo esempio, il div avrà uno sfondo blu su schermi piccoli, uno sfondo verde su schermi medi e uno sfondo rosso su schermi grandi.
Puoi anche utilizzare varianti responsive per controllare il layout dei tuoi elementi:
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-1/2 lg:w-1/3">Colonna 1</div>
<div class="w-full md:w-1/2 lg:w-1/3">Colonna 2</div>
<div class="w-full md:w-1/2 lg:w-1/3">Colonna 3</div>
</div>Qui, le colonne si impileranno verticalmente su schermi piccoli, verranno visualizzate in due colonne su schermi medi e in tre colonne su schermi grandi.
Personalizzare Le Classi Predefinite Di Tailwind CSS
Uno dei punti di forza di Tailwind CSS sono le sue opzioni di personalizzazione. Puoi facilmente personalizzare la configurazione predefinita per adattarla alle esigenze di design del tuo progetto. Il file tailwind.config.js ti permette di estendere o sovrascrivere le impostazioni predefinite.
Ecco alcune opzioni di personalizzazione comuni. Puoi personalizzare completamente ogni parte di Tailwind, quindi questa non è affatto una lista esaustiva.
Colori
Tailwind CSS offre una ricca palette di colori di base, ma puoi personalizzarla facilmente per adattarla al branding o alle esigenze di design del tuo progetto. Il file tailwind.config.js ti permette di estendere o sovrascrivere la palette di colori predefinita. Per aggiungere colori personalizzati, puoi utilizzare la proprietà extend all’interno dell’oggetto colors:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#ff5a5f',
'brand-secondary': '#484848',
'brand-accent': '#ffcc00',
},
},
},
}In questo esempio, abbiamo aggiunto tre colori personalizzati: brand-primary, brand-secondary e brand-accent.
Questi colori possono ora essere utilizzati con classi di utilità come bg-brand-primary, text-brand-secondary, border-brand-accent, ecc. Puoi anche modificare le sfumature di colore esistenti o aggiungere nuove sfumature alla tavolozza di colori predefinita in questo modo:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
blue: {
'100': '#e6f0ff',
'200': '#c3d9ff',
'300': '#a1c2ff',
'400': '#7eabff',
… and so on …
},
},
},
},
}Famiglia Di Caratteri
Tailwind CSS utilizza un font di famiglia predefinito, ma similmente ai colori, puoi cambiare questi predefiniti per adattarli allo stile tipografico del tuo progetto.
Nel file tailwind.config.js, puoi estendere o sostituire il carattere predefinito. Per aggiungere famiglie di caratteri personalizzati, utilizza la proprietà extend all’interno dell’oggetto fontFamily:
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
serif: ['Merriweather', 'serif'],
mono: ['Fira Code', 'monospace'],
},
},
},
}Puoi anche sostituire completamente il carattere predefinito omettendo la proprietà extend:
// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'body': ['Open Sans', 'sans-serif'],
'heading': ['Montserrat', 'sans-serif'],
},
},
}Punti di Interruzione Responsive
Tailwind CSS offre un sistema di design responsive di base, ma puoi personalizzarlo ulteriormente per adattarlo ai breakpoint specifici del tuo progetto e alle esigenze responsive.
Modificando l’oggetto screens nel file tailwind.config.js, puoi definire breakpoint personalizzati e applicare stili diversi in base alle dimensioni dello schermo.
Ad esempio, supponiamo che tu abbia un punto di interruzione unico a 1440px dove vuoi applicare stili specifici:
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xs': '480px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1440px',
},
},
}Con questo breakpoint personalizzato definito, puoi utilizzare classi di utilità responsive come xl:text-lg, xl:flex, xl:w-1/2, ecc., per applicare stili specifici per schermi più larghi di 1440px.
Spaziatura
Tailwind CSS offre un set completo di valori di spaziatura per margini, padding e altre utilità legate alla spaziatura. Puoi personalizzare questi valori per adattarli alle esigenze di layout del tuo progetto. Per aggiungere valori di spaziatura personalizzati, utilizza la proprietà extend all’interno dell’oggetto di spaziatura:
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'13': '3.25rem',
'15': '3.75rem',
'128': '32rem',
'144': '36rem',
},
},
},
}Integrazione di Librerie di Terze Parti
Tailwind CSS si integra con le popolari librerie e framework frontend come React, Vue e Angular. Quando lavori con queste librerie, puoi sfruttare le classi di utilità di Tailwind per stilizzare i tuoi componenti e creare interfacce utente coerenti e mantenibili. Ad esempio, in un componente React, puoi applicare direttamente le classi di utilità di Tailwind agli elementi JSX:
import React from 'react';
const Card = () => {
return (
<div className="bg-white shadow-md rounded-lg p-6">
<h2 className="text-2xl font-bold mb-4">Titolo Della Card</h2>
<p className="text-gray-600">Il contenuto della card va qui...</p>
</div>
);
};
export default Card;Questo approccio multi-framework rende davvero facile riunire il meglio di tutti i mondi, aiutandoti a creare un’applicazione bellissima con quasi nessuno sforzo.
Creazione Di Un’Applicazione Semplice In Tailwind CSS
Immagina di creare una semplice pagina di atterraggio per una piattaforma di corsi online fittizia chiamata LearnHub utilizzando Tailwind per stilizzare l’intera pagina.
Passo 1: Configurazione Della Struttura HTML
Prima, creiamo la struttura HTML di base per la nostra pagina di destinazione:
<p><!DOCTYPE html><br />
<html lang="it"><br />
<head><br />
<meta charset="UTF-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="output.css" rel="stylesheet">
<title>LearnHub - Piattaforma di Corsi Online</title><br />
</head><br />
<body></p>
<header>
<!-- Il menu di navigazione sarà qui --><br />
</header>
<p> <main><br />
<!-- Il contenuto principale sarà qui --><br />
</main></p>
<footer>
<!-- Il contenuto del footer sarà qui --><br />
</footer>
<p></body><br />
</html></p>In questo passaggio, abbiamo configurato la struttura di base del nostro documento HTML. Abbiamo la sezione <head> dove includiamo i necessari meta tag e colleghiamo il nostro file CSS (output.css). All’interno del <body>, abbiamo le sezioni <header>, <main> e <footer> dove aggiungeremo il nostro contenuto.
Passo 2: Creazione Del Menu Di Navigazione
Ora, aggiungiamo un semplice menu di navigazione alla sezione <header> utilizzando le classi di utilità di Tailwind CSS:
<header class="bg-blue-600 text-white py-4">
<nav class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold">LearnHub</a>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-200">Corsi</a></li>
<li><a href="#" class="hover:text-blue-200">Prezzi</a></li>
<li><a href="#" class="hover:text-blue-200">Informazioni</a></li>
</ul>
</nav>
</header>
Ecco cosa fa ciascuna classe:
- bg-blue-600: Imposta il colore di sfondo dell’intestazione su una tonalità di blu.
- text-white: Imposta il colore del testo su bianco.
- py-4: Aggiunge un imbottitura superiore e inferiore all’intestazione.
- container mx-auto: Centra orizzontalmente il menu di navigazione.
- flex justify-between items-center: Utilizza flexbox per distribuire uniformemente e allineare verticalmente il logo e gli elementi del menu.
- text-2xl font-bold: Rende il testo del logo più grande e in grassetto.
- flex space-x-4: Aggiunge spaziatura tra gli elementi del menu utilizzando flexbox.
- hover:text-blue-200: Cambia il colore del testo in una tonalità di blu più chiara quando si passa il mouse sugli elementi del menu.
Passo 3: Aggiunta Del Contenuto Principale
Aggiungiamo del contenuto alla sezione <main> della nostra pagina iniziale:
<main class="container mx-auto mt-8">
<section class="bg-gray-100 rounded-lg p-6">
<h1 class="text-3xl font-bold mb-4">Benvenuto su LearnHub</h1>
<p class="text-gray-700 mb-6">Scopri un mondo di conoscenza con i nostri corsi online.</p>
<a href="#" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Inizia</a>
</section>
<section class="mt-8">
<h2 class="text-2xl font-bold mb-4">Corsi In Evidenza</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- I card dei corsi verranno inserite qui -->
</div>
</section>
</main>Ecco cosa fa ogni classe:
- container mx-auto: Centra il contenuto principale orizzontalmente.
- mt-8: Aggiunge un margine nella parte superiore del contenuto principale.
- bg-gray-100 rounded-lg p-6: Aggiunge uno sfondo grigio chiaro, arrotonda gli angoli e aggiunge un’imbottitura alla sezione di benvenuto.
- text-3xl font-bold mb-4: Rende il testo dell’intestazione più grande, in grassetto, e aggiunge un margine in basso.
- text-gray-700 mb-6: Imposta il colore del testo su un grigio più scuro e aggiunge un margine in basso per il paragrafo.
- bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700: Stilizza il pulsante Inizia a Imparare con uno sfondo blu, testo bianco, imbottitura, angoli arrotondati, e uno sfondo blu più scuro al passaggio del mouse.
- text-2xl font-bold mb-4: Rende l’intestazione Corsi in Evidenza più grande, in grassetto, e aggiunge un margine in basso.
- grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4: Crea un layout a griglia responsivo per le schede dei corsi. Mostra una colonna su schermi piccoli, due colonne su schermi medi e tre colonne su schermi grandi, con uno spazio tra le schede.
Unendo l’intestazione e il codice principale dovresti ottenere il seguente risultato:
Passaggio 4: Aggiunta del piè di pagina
Infine, aggiungiamo un semplice piè di pagina alla nostra pagina di destinazione:
<footer class="bg-gray-800 text-white py-4 mt-8">
<div class="container mx-auto text-center">
<p>© 2023 LearnHub. Tutti i diritti riservati.</p>
</div>
</footer>Ecco cosa fa ogni classe:
- bg-gray-800 text-white: Imposta il colore di sfondo del piè di pagina su grigio scuro e il colore del testo su bianco.
- py-4: Aggiunge un margine superiore e inferiore al piè di pagina.
- mt-8: Aggiunge un margine superiore al piè di pagina.
- container mx-auto: Centra orizzontalmente il contenuto del piè di pagina.
- text-center: Centra il testo all’interno del piè di pagina.
Mettendo Tutto Insieme
Ecco il codice finale assemblato:
<p><!DOCTYPE html><br />
<html lang="it"><br />
<head><br />
<meta charset="UTF-8" /><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="output.css" rel="stylesheet" />
<title>LearnHub - Piattaforma di Corsi Online</title><br />
</head><br />
<body></p>
<header class="bg-blue-600 py-4 text-white">
<nav class="container mx-auto flex items-center justify-between">
<a href="#" class="text-2xl font-bold">LearnHub</a></p>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-200">Corsi</a></li>
<li><a href="#" class="hover:text-blue-200">Prezzi</a></li>
<li><a href="#" class="hover:text-blue-200">Chi Siamo</a></li>
</ul>
</nav>
</header>
<p> <main class="container mx-auto mt-8"></p>
<section class="rounded-lg bg-gray-100 p-6">
<h2 id="h2_benvenuto-su-learnhub" class="mb-4 text-3xl font-bold">Benvenuto su LearnHub</h2>
<p class="mb-6 text-gray-700">Scopri un mondo di conoscenza con i nostri corsi online.</p>
<p> <a href="#" class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Inizia a imparare</a><br />
</section>
<section class="mt-8">
<h2 id="h2_corsi-in-evidenza" class="mb-4 text-2xl font-bold">Corsi in Evidenza</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<!-- I card dei corsi saranno qui -->
</div>
</section>
<p> </main></p>
<footer class="mt-8 bg-gray-800 py-4 text-white">
<div class="container mx-auto text-center">
<p>© 2023 LearnHub. Tutti i diritti riservati.</p>
</p>
</div>
</footer>
<p> </body><br />
</html></p>Per mostrare l’output agli utenti, devi avere Tailwind CSS configurato correttamente nel tuo progetto. Assicurati di aver seguito i passaggi di installazione menzionati in precedenza, inclusa la creazione del file tailwind.config.js e l’elaborazione del tuo CSS con Tailwind.
Una volta configurato Tailwind CSS, puoi salvare questo codice in un file HTML (ad esempio, index.html) e aprirlo in un browser web. Il browser visualizzerà la pagina di atterraggio con gli stili applicati utilizzando le classi di utilità di Tailwind CSS. Se vuoi semplicemente testare Tailwind, puoi sempre utilizzare Tailwind Play, un piccolo strumento molto utile di Tailwind dove puoi sperimentare con le diverse classi.
Ed ecco fatto! Abbiamo creato una semplice pagina di destinazione per la nostra piattaforma di corsi online fittizia utilizzando le classi di utilità di Tailwind CSS.
Dove andare da qui?
Ora che hai visto la potenza e la flessibilità di Tailwind CSS, sai che le possibilità qui sono infinite. La sua natura flessibile e personalizzabile può aiutarti a costruire qualsiasi cosa, da semplici landing pages ad applicazioni web complesse, mantenendo un design pulito e coerente.
Ecco alcune idee per iniziare:
- Crea Un Sito Portfolio: Mostra le tue competenze e progetti con un portfolio sbalorditivo.
- Crea Un Blog: Condividi i tuoi pensieri e idee con il mondo usando un blog bello e funzionale realizzato con Tailwind.
- Sviluppa Una Applicazione Web: Tailwind CSS è perfetto per costruire interfacce utente per applicazioni web di ogni tipo.
Indipendentemente da ciò che costruisci, Tailwind CSS può aiutarti a creare un sito web stupendo e ben funzionante.
E quando si tratta di ospitare la tua creazione, considera una soluzione affidabile e scalabile come i servizi VPS di DreamHost per garantire che il tuo sito web funzioni senza problemi e in modo efficiente.
Inizia a costruire interfacce utente bellissime con una minima conoscenza di CSS!
