Introduzione e pratica con Tailwind CSS: costruire siti web moderni e responsive da zero

Che cos’è Tailwind CSS?

Nel mondo dello sviluppo web, i framework CSS continuano a emergere in numero crescente…Tailwind CSSSi distingue per il suo unico concetto di “priorità alla funzionalità” (Utility-First). Non si tratta di un insieme di componenti predefiniti per l’interfaccia utente (UI), bensì di uno strumentario che fornisce classi CSS di livello basso e ad alta precisione. Gli sviluppatori possono combinare queste classi CSS atomiche per creare soluzioni personalizzate.text-center、mt-4、bg-blue-500È possibile costruire design completamente personalizzati direttamente nell’HTML. Questo approccio ha completamente cambiato il modo in cui i sviluppatori creano gli stili, spostando le decisioni relative alla formattazione dai file CSS all’interno del linguaggio di markup o dei template, permettendo una stretta integrazione tra stile e struttura del codice. Il risultato è una velocità di sviluppo e una flessibilità senza precedenti.

Rispetto ai framework tradizionali come CSS o Bootstrap,Tailwind CSSIl vantaggio principale di questo approccio risiede nell’evitare i problemi legati alla scelta dei nomi per i componenti e nell’impennata delle dimensioni dei file di stile (CSS). Non è più necessario spendere molto tempo a pensare a nomi di classe per ogni singolo componente, né gestire file CSS che diventano sempre più complessi e disallineati rispetto alla struttura HTML. Tutti gli stili vengono espressi attraverso un insieme di classi ben progettate e coerenti, il che rende la creazione di interfacce responsive e interattive un processo semplice ed efficiente.

Come installare e configurare

Per iniziare a utilizzarlo, segui questi passaggi:Tailwind CSSÈ possibile integrarlo nel proprio progetto in diversi modi. Il metodo più diffuso consiste nell’installarlo tramite i gestori di pacchetti di Node.js, come npm o yarn.

Si consiglia di leggere Da principiante a esperto con Tailwind CSS: una guida pratica per creare siti web moderni e reattivi.。

Innanzitutto, inizializza npm nel directory radice del tuo progetto (se non è già stato fatto) e poi installa i pacchetti necessari.Tailwind CSSNonché le sue dipendenze.

Aiuto per la creazione di siti web su WordPress.com.

99.999% disponibilità + disaster recovery cross-region, supporto 24 ore su 24, utilizzo gratuito dell'IA per la creazione di siti web con l'acquisto di un pacchetto blog.

免费域名一年

Visita il sito web di WordPress.com per ricevere assistenza nella creazione di un sito web →

Assistente per la creazione di siti web di UltaHost

Oltre 900 modelli gratuiti e personalizzabili, per ottenere la capacità SEO necessaria per ottimizzare la visibilità del sito web nelle ricerche.

Offerta 40%

Visita l'assistente per la creazione di siti web di UltaHost →

npm install -D tailwindcss
npx tailwindcss init

Eseguirenpx tailwindcss initIl comando genererà un file chiamato…tailwind.config.jsIl file di configurazione. Questo file è personalizzato.Tailwind CSSIl nucleo principale di questo strumento permette di definire i colori di sfondo del progetto, i font utilizzati, i punti di interruzione del codice, i plugin da integrare, e molto altro ancora. Una configurazione estremamente semplice potrebbe apparire così, specificando…Tailwind CSSQuali file devono essere scansionati per effettuare la pulizia dello stile (Purge)?

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Successivamente, sarà necessario importare i vari componenti di Tailwind nel file CSS principale del progetto. Di solito, questo file ha il nome di…src/styles.css或input.css。

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Infine, è necessario disporre di un processo di costruzione per elaborare le istruzioni sopra menzionate e compilarle in CSS finale. È possibile utilizzare…PostCSSCooperaretailwindcssPlugin, oppure utilizzarlo direttamente.Tailwind CLIStrumenti. Esempio di comando di compilazione utilizzando la CLI:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Questo comando effettuerà la monitorazione delle attività in corso../src/input.cssI cambiamenti apportati al file vengono immediatamente compilati e visualizzati in output../dist/output.cssDevi semplicemente creare un link nell’HTML che punta al file generato in finale.output.cssBasta il file.

Si consiglia di leggere Introduzione e pratica con Tailwind CSS: costruire da zero interfacce moderne e responsive。

Core utility classes and responsive design

Tailwind CSSIl potere di questo strumento si manifesta nella sua vasta e organizzata collezione di classi utili per lo sviluppo web. Queste classi coprono quasi tutti gli attributi CSS più comuni e seguono un insieme uniforme di regole di denominazione.

Layout e spaziatura

Controllare il layout e gli spazi tra gli elementi è un’operazione molto frequente nel processo di sviluppo quotidiano.Tailwind CSSSono state fornite numerose classi per implementare le varie funzionalità richieste. Ad esempio,flex、gridUtilizzato per creare layout.m-4(margin)p-6Il “padding” viene utilizzato per controllare i margini interni ed esterni di un elemento. I valori numerici corrispondono solitamente a unità “rem” (normalmente multipli di 0,25rem, il valore predefinito).m-autoCiò indica che i margini esterni vengono impostati automaticamente.

<div class="flex justify-between items-center p-6">
  <div class="m-2">Progetto Uno</div>
  <div class="m-2">Progetto Due</div>
</div>

Colore e sfondo

Il sistema dei colori fa parte della tematizzazione. Puoi utilizzare, ad esempio,text-gray-800Impostare il colore del testo.bg-blue-500Imposta il colore di sfondo,border-red-300Impostare il colore del bordo. I valori numerici (da 50 a 900) rappresentano un gradiente di intensità del colore, garantendo un’elevata coerenza estetica nel design.

L'assistente per la creazione di siti web di Bluehost.

Forniamo strumenti di creazione di siti web basati sull'intelligenza artificiale, chat online e supporto telefonico 24 ore su 24 e 7 giorni su 7, un dominio gratuito per un anno, CDN gratuito e un accordo di livello di servizio (SLA) con una disponibilità del 99,999%

Visita Bluehost.

Breakpoint responsive

Realizzare un design reattivo significaTailwind CSSQuesta è una delle punti di forza di Vue. Fornisce cinque prefissi di breakpoint per impostazione predefinita:sm:、md:、lg:、xl:、2xl:Puoi aggiungere questi prefissi davanti a qualsiasi classe pratica, per specificare che lo stile sarà efficace a una larghezza di schermo specifica o superiore.

<div class="text-center md:text-left lg:flex">
  <p class="w-full lg:w-1/2">Sul telefono vengo visualizzato in posizione centrale; su schermi di dimensioni medie vengo allineato a sinistra; su schermi più grandi mi trovo all’interno di un contenitore “flex” e la mia larghezza è pari a metà della larghezza totale del contenitore.</p>
</div>

Questo approccio “mobile-first” significa che i style senza prefisso sono applicabili a tutti gli schermi, mentre i style con prefisso sovrappongono i valori relativi agli schermi più grandi, rendendo la creazione di layout responsivi estremamente chiara e semplice.

Pratica: Creare un componente a scheda

Uniamo le conoscenze apprese finora creando un componente di tipo “carta” (card) moderno e responsive. Questa carta includerà un’immagine di profilo, un titolo, del testo descrittivo e un pulsante di azione.

Si consiglia di leggere Introduzione a Tailwind CSS e casi pratici: una guida pratica per creare siti web moderni e reattivi.。

Innanzitutto, creiamo il contenitore di base per le carte, utilizzando angoli arrotondati, ombreggiature e margini interni per definire la struttura visiva delle carte stesse.

<div class="max-w-sm rounded-2xl overflow-hidden shadow-lg bg-white p-6">
  <!-- 卡片内容将放在这里 -->
</div>

Successivamente, all’interno del contenitore, creeremo un layout “flex” per disporre gli avatar e le informazioni degli utenti.

hosting.com

SSL gratuito, Cloudflare CDN, WAF, oltre 40 data center globali tra cui scegliere, minore latenza grazie alla vicinanza, assistenza 24/7/365. Ora puoi risparmiare fino a 671 TB di dati e supporta la creazione di IA e l'ottimizzazione SEO.

Visita hosting.com

<div class="flex items-center space-x-4 mb-4">
  <img class="w-12 h-12 rounded-full object-cover" src="/avatar.jpg" alt="Immagine del profilo dell’utente">
  <div>
    <h3 class="text-xl font-bold text-gray-900">Zhang San</h3>
    <p class="text-gray-500">Sviluppatore front-end</p>
  </div>
</div>

Poi, aggiungi il contenuto principale della descrizione della carta.

<p class="text-gray-700 mb-6">
  Questo è un esempio di utilizzo…<code data-no-auto-translation="">Tailwind CSS</code>Esempio di componente di carta costruito: mostra come, combinando classi pratiche, sia possibile realizzare rapidamente un elemento UI con un ottimo design visivo e pienamente responsive.
</p>

Infine, aggiungiamo un pulsante. Utilizzando il prefisso “responsive”, il pulsante occupa tutta la larghezza dello schermo sui dispositivi più piccoli, mentre sui dispositivi più grandi la sua larghezza si adatta automaticamente al contenuto presente sullo schermo.

<button class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1">
  了解更多
</button>

Combinando tutto il codice, otterrai un componente di carta completo. Puoi personalizzarlo in base alle tue esigenze.max-w-smI valori relativi ai margini interni o ai prefissi dei punti di interruzione possono essere facilmente modificati per ottimizzare il loro comportamento su diversi dispositivi. Questa pratica dimostra chiaramente come sia possibile ottenere risultati migliori in base alle specifiche caratteristiche di ciascun dispositivo.Tailwind CSS“Un flusso di lavoro efficiente per il ”progettazione all’interno dei marcatori”.

Riassumendo

Tailwind CSSNon si tratta semplicemente di un framework CSS: rappresenta un paradigma di sviluppo di stili web moderni, efficiente e facile da mantenere. Grazie ai suoi classi pratiche e “atomiche”, gli sviluppatori possono creare interfacce utente uniche in tempi sorprendentemente rapidi, mantenendo al contempo un elevato livello di coerenza e controllabilità del codice. Il sistema di design responsive integrato, nonché i temi altamente configurabili, rendono semplice l’adattamento ai diversi dispositivi e la personalizzazione del look del sito in base alle esigenze del brand. Sebbene all’inizio possa essere necessario memorizzare alcuni nomi di classi, una volta acquisita dimestichezza con l’strumento, i vantaggi in termini di velocità di sviluppo e riduzione del carico mentale sono incomparabili rispetto ai metodi tradizionali basati su CSS. È particolarmente adatto a team e sviluppatori individuali che cercano di ottimizzare la velocità di lavoro, la libertà di progettazione e le prestazioni del prodotto finale.Tailwind CSSSenza dubbio, è uno strumento molto potente.

FAQ - Domande frequenti

Tailwind CSS rende l'HTML troppo complesso?

Infatti, scrivere un gran numero di nomi di classi direttamente nell’HTML rende i tag più lunghi e più complessi da leggere.Tailwind CSSLo svantaggio più spesso menzionato.

Tuttavia, questo “ingombro” (ovvero l’eccesso di codice) ha dei significati positivi nella pratica: lega strettamente lo stile all’struttura del codice, permettendo di comprendere immediatamente gli aspetti estetici degli elementi HTML semplicemente leggendo il codice stesso, senza dover passare avanti e indietro tra i file HTML e CSS. Nei progetti che utilizzano framework modulari (come React o Vue), i nomi di questi classi sono incapsulati all’interno dei componenti, il che migliora notevolmente la manutenibilità del codice. Inoltre, grazie alle funzionalità di “purifica” (Purge) offerte dai tool di sviluppo, il file CSS prodotto finale risulta molto più leggero, contenendo soltanto gli stili effettivamente utilizzati; questo aspetto migliora le prestazioni del sito rispetto a un file CSS scritto a mano o generato da framework tradizionali.

Come personalizzare i colori o gli spazi del tema?

I temi personalizzati vengono modificati principalmente modificando i file presenti nella directory radice del progetto.tailwind.config.jsLa configurazione può essere completata utilizzando un file di configurazione appropriato.

Nel file di configurazione…theme.extendIn alcuni casi, è possibile aggiungere o sovrascrivere i valori predefiniti del tema. Ad esempio, per inserire un colore specifico del marchio, si può configurare il tema in questo modo:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1a73e8',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Dopo aver completato la configurazione, potrai utilizzarla all’interno del progetto.bg-brand-blue或w-128Ecco un esempio di classe personalizzata. Questo approccio garantisce che il tuo sistema di design rimanga coerente in tutto il progetto.

Con quali framework front-end è adatto ad essere utilizzato?

Tailwind CSSÈ in grado di integrarsi perfettamente con quasi tutti i moderni framework e librerie front-end, il che rappresenta uno dei motivi principali della sua popolarità.

Nei framework componentizzati come React, Vue, Angular o Svelte, è possibile utilizzare le classi Tailwind direttamente nei template delle componenti, esattamente come si farebbe con l’HTML tradizionale. Molti strumenti di sviluppo forniti da questi framework (ad esempio Next.js, Vite) offrono soluzioni pronte all’uso per l’integrazione di Tailwind.Tailwind CSSOpzioni di integrazione. Inoltre, come…@tailwindcss/forms、@tailwindcss/typographyTali plugin ufficiali permettono di risolvere più efficacemente problemi legati allo stile dei moduli e al formato dei contenuti ricchi (rich text), adattandosi a scenari specifici, e migliorano ulteriormente l’esperienza di sviluppo in collaborazione con diversi framework.

I file CSS finali in un ambiente di produzione saranno molto grandi?

No. Proprio questo è il punto.Tailwind CSSUn vantaggio fondamentale dal punto di vista del design: sebbene la versione di sviluppo contenga tutte le classi possibili e quindi abbia un volume di file piuttosto elevato, ciò è fatto esclusivamente per facilitare il processo di sviluppo stesso.

Durante la fase di build della produzione,Tailwind CSSAnalizzerà i tuoi file di template attraverso il suo meccanismo di “purificazione” (chiamato “scansione del contenuto” nelle versioni v3.0 e successive), al fine di verificare eventuali problemi o errori.tailwind.config.js的content(I campi specificati indicano quali classi CSS devono essere utilizzate; soltanto queste vengono incluse nel file CSS finale.) Ciò significa che il file CSS risultante ha solitamente una dimensione compresa tra pochi KB e una dozzina di KB, molto più piccolo di molti file CSS scritti a mano o dei file CSS di framework UI non ottimizzati, garantendo così un’eccellente velocità di caricamento.