Guida completa a Tailwind CSS: costruire interfacce moderne e responsive da zero

I concetti fondamentali e i vantaggi di Tailwind CSS

Tailwind CSS è un framework CSS incentrato sull’efficienza e sulla flessibilità nell’uso. Si distingue dai tradizionali framework per l’interfaccia utente per la sua filosofia di progettazione completamente diversa. Il suo punto focale è l’offerta di classi di base di alto livello di utilità, che permettono agli sviluppatori di combinare e creare qualsiasi tipo di design direttamente nell’HTML, senza dover ricorrere a componenti predefiniti e non personalizzabili. Questo approccio aumenta notevolmente l’efficienza e la flessibilità dello sviluppo.

Applica lo stile fornendo un unico nome di classe funzionale, ad esempio utilizzando… text-center Per centrare il testo, utilizza… p-4 Per aggiungere i margini interni, basta utilizzare i relativi attributi nelle tag delle elementi grafici. Questo approccio elimina la necessità di continuare a passare da un file all’altro o da un linguaggio di programmazione all’altro per modificare gli stili, poiché tutti i dettagli estetici vengono definiti direttamente all’interno delle tag. Inoltre, grazie alla combinabilità dei vari elementi e stili, è possibile creare design completamente unici, senza essere vincolati dai temi predefiniti di un framework o dalle librerie di componenti disponibili.

Un altro vantaggio significativo è la dimensione controllabile dei pacchetti. Questo è possibile grazie all’utilizzo di… purgecss(Nelle versioni di Tailwind CSS a partire da v2, il framework è stato integrato nel processo di compilazione; in questo modo vengono automaticamente eliminati tutti i file CSS non utilizzati. Di conseguenza, il file CSS finale nell’ambiente di produzione pesa solitamente solo pochi KB, garantendo prestazioni eccellenti.)

Si consiglia di leggere Come costruire rapidamente pagine web moderne e responsive utilizzando Tailwind CSS。

Come iniziare l’installazione e la configurazione?

Per iniziare a utilizzare Tailwind CSS, è necessario prima installarlo nel tuo progetto tramite un gestore di pacchetti. I metodi più comuni sono l’utilizzo di npm o yarn. Vi presenteremo il metodo standard di integrazione tramite PostCSS, che è il flusso di lavoro consigliato da Tailwind.

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 →

Innanzitutto, inizializza npm nel directory radice del progetto e installa Tailwind CSS insieme alle sue dipendenze. Devi eseguire i seguenti passaggi: tailwindcss、postcss 和 autoprefixerPoi, generare il file di configurazione per Tailwind. tailwind.config.js E i file di configurazione di PostCSS postcss.config.js。

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

Successivamente, nel file principale di CSS del progetto (ad esempio…) src/styles.css 或 @/styles/globals.cssVengono introdotte le istruzioni di Tailwind. Queste istruzioni costituiscono il punto di partenza per la generazione di tutti i classi utili durante il processo di compilazione del codice.

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

Infine, tailwind.config.js Configurazione centrale content Il percorso indica a Tailwind quali file esaminare per eseguire l’operazione di PurgeCSS (o il processo di ottimizzazione del codice utilizzato dall’engine JIT). Questo aspetto è di fondamentale importanza per l’ottimizzazione dell’ambiente di produzione.

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

Dopo l’esecuzione del processo di compilazione, Tailwind genererà i file CSS in base ai nomi delle classi effettivamente utilizzati nei tuoi modelli HTML.

Si consiglia di leggere Padroneggiare completamente Tailwind CSS: una guida al framework CSS moderno, dalle basi all’uso pratico。

Grammatica di base per applicazioni pratiche e design responsivo

La grammatica di Tailwind CSS è molto intuitiva e segue lo schema di denominazione “attributo-valore”. Ad esempio,mt-4 Esprimere margin-top: 1rem;，bg-blue-500 Esprimere background-color: #3b82f6;I valori numerici corrispondono solitamente a una scala di spaziazione predefinita (0, 0.25rem, 0.5rem, 1rem…) o a una gamma di colori (50, 100, 200, … 900).

Costruire interfacce responsive è uno dei punti di forza di Tailwind. Adotta un approccio di progettazione incentrato sui dispositivi mobili: i nomi delle classi senza prefisso vengono applicati a tutte le dimensioni dello schermo, mentre le classi con prefisso vengono utilizzate per dimensioni specifiche o superiori a determinati “punti di interruzione” (breakpoints). Il framework include cinque punti di interruzione predefiniti:sm (640px)md (768px)lg (1024px)xl (1280px) e 2xl (1536px).

<div class="text-sm bg-gray-100 p-4 md:text-base md:bg-white lg:p-8">
  <!--
    在移动设备上：小字体、灰色背景、1rem 内边距。
    在中等屏幕及以上：基准字体、白色背景。
    在大屏幕及以上：2rem 内边距。
  -->
  Questo è un contenitore div responsive (adattivo a diversi dispositivi).
</div>

Oltre ai prefissi per i layout responsivi, i prefissi per le varianti di stato sono altrettanto utilizzati, ad esempio: hover:、focus:、active: Questo ti permette di aggiungere facilmente stili agli stati di interazione.

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.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停我
</button>

Personalizzazione dei temi e estensioni dei plugin

Nonostante Tailwind offra una vasta gamma di design predefiniti, è raro utilizzarli tutti interamente. La personalizzazione dei temi avviene modificando i file di configurazione forniti dal framework. tailwind.config.js Nel file… theme È stato implementato in parte in questo modo. È possibile sovrascrivere i valori predefiniti per la palette di colori, i font, le scale di spaziatura, i punti di interruzione e qualsiasi altro elemento legato al design.

Ad esempio, per aggiungere i colori personalizzati del marchio e modificare lo stile dei bordi arrotondati predefinito, puoi configurare le impostazioni in questo modo:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      borderRadius: {
        'extra-large': '3rem',
      }
    },
  },
}

In seguito, potrai utilizzare elementi del genere all’interno del progetto. bg-brand-primary 和 rounded-extra-large Un nome di classe del genere.

Si consiglia di leggere Introduzione e avanzamento a Tailwind CSS: costruire da zero pagine web moderne e responsive。

Quando i classi utili integrati non sono in grado di soddisfare esigenze specifiche, è possibile estendere le funzionalità del software tramite il sistema di plugin. È possibile scrivere i propri plugin oppure utilizzare quelli disponibili nella comunità. Ad esempio, è possibile installare i plugin forniti ufficialmente. @tailwindcss/forms 和 @tailwindcss/typography I plugin permettono di gestire in modo più efficace la formattazione degli stili dei moduli (form) nonché del contenuto che non presenta alcun stile visivo.

npm install -D @tailwindcss/typography

Poi registralo nel file di configurazione:

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

module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    // 其他插件
  ],
}

Flusso di lavoro per la creazione di componenti complessi

Quando si utilizza Tailwind CSS per creare componenti complessi, può sorgere il problema di nomi di classi HTML troppo lunghi. Per risolvere questo problema, Tailwind consiglia alcune buone pratiche. La prima di queste consiste nell’utilizzare… @apply Le istruzioni presenti nel CSS servono per estrarre combinazioni di classi utili e ripetute, il che aiuta a mantenere il codice HTML ordinato e a creare elementi CSS astratti e riutilizzabili.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

Poi, in HTML è sufficiente utilizzare un solo nome di classe.

<button class="btn-primary">
  点击
</button>

Per i framework più complessi e basati su componenti (come React o Vue), la prassi migliore è scrivere queste classi di stile direttamente nel template del componente, sfruttando l’incapsulamento offerto dal componente stesso per gestirne gli stili. Se lo stesso componente viene utilizzato in più parti del progetto, si può considerare l’uso di librerie che integrano CSS nel codice JavaScript (come Twin Macro) oppure estrarre i modelli di stile ripetuti in file di configurazione. components “Layer” (strato) è un concetto fondamentale nella progettazione di interfacce utente, ma il termine “layered” (a strati) è meno utilizzato nei contesti di sviluppo moderno basato su componenti.

Un altro concetto importante è l’equilibrio tra la “priorità delle classi funzionali” e l’uso di “nomi di classi semantici”. Per i modelli UI altamente ripetitivi e con un significato chiaro (come schede, badge, barre di navigazione), è consigliabile… @apply Creare classi di componenti è una scelta ragionevole. Tuttavia, per la maggior parte dei casi in cui si tratta di modifiche occasionali o di piccoli aggiustamenti al design, utilizzare classi funzionali consente di ottenere un maggior livello di efficienza e flessibilità nello sviluppo.

Riassumendo

Tailwind CSS ha completamente rivoluzionato il modo in cui i sviluppatori scrivono il codice CSS grazie alla sua unica e innovativa metodologia di priorizzazione delle funzionalità. Offrendo un insieme di classi pratiche e combinabili a livello di base, Tailwind restituisce ai sviluppatori il controllo totale sulle decisioni relative allo stile, migliorando notevolmente l’efficienza di sviluppo pur mantenendo un’elevata flessibilità nella personalizzazione. Dalla semplice installazione e configurazione alla grammatica responsive, alla personalizzazione dei temi e alla creazione di componenti complessi, Tailwind fornisce un insieme completo di strumenti e guide per il flusso di lavoro. L’integrazione profonda con PurgeCSS garantisce un output di alta qualità, mentre la sua attiva comunità e l’ecosistema di plugin permettono a Tailwind di adattarsi alle continue evoluzioni delle esigenze front-end. Imparare a utilizzare Tailwind CSS significa acquisire una potente capacità di rispondere rapidamente ai cambiamenti nel design e di creare interfacce utente di alta qualità.

FAQ - Domande frequenti

L’utilizzo di Tailwind CSS può causare confusione nella struttura HTML?

Dipende dal modo in cui sono organizzati i sviluppatori. Anche se l’aggiunta di più nomi di classe direttamente nell’HTML può sembrare ridondante, in realtà permette di unire stile e struttura in modo più stretto, evitando il carico cognitivo legato ai continui spostamenti tra i file CSS e quelli HTML. Per progetti di grandi dimensioni, è possibile incapsulare gli stili utilizzando framework modulari (come React, Vue) o altri approcci simili. @apply Estrai i modelli di stile duplicati dalle istruzioni, al fine di mantenere il codice ordinato e pulito.

Cos’è il modo JIT (Just-In-Time) di Tailwind CSS?

Il modo JIT (Just-In-Time) è stato introdotto in Tailwind CSS v2.1 ed è diventato l’unico modo disponibile a partire da v3.0. Questo sistema genera il CSS necessario soltanto al momento in cui viene creato il template, anziché produrre in anticipo tutte le possibili varianti di classi. Questo comportamento offre numerosi vantaggi: il processo di compilazione nell’ambiente di sviluppo avviene in tempi estremamente rapidi e viene supportata la creazione di varianti con valori qualsiasi. p-[13px]Inoltre, il CSS generato è sempre il più compatto possibile in un ambiente di produzione, poiché contiene soltanto gli stili effettivamente necessari.

Come sovrascrivere o resettare gli stili predefiniti del browser?

Tailwind CSS opera a livello di base (@tailwind baseContiene un elemento chiamato… Preflight Un insieme di stili moderni per il reset, basato su… normalize.cssTuttavia, sono stati apportati molti ulteriori modifiche mirate al fine di fornire un punto di partenza pulito e coerente per la progettazione personalizzata che funzioni correttamente in diversi browser. Ad esempio, sono stati rimossi tutti i margini predefiniti e il modello di box (box model) è stato impostato in modo appropriato. border-boxInoltre, lo stile dei titoli e delle liste è stato standardizzato. Se desideri disattivarlo completamente o apportare modifiche parziali, puoi farlo tramite i file di configurazione.

Tailwind CSS può coesistere con altri framework CSS o con progetti esistenti?

Certo, ma ci sono alcune cose da considerare. È possibile integrare gradualmente Tailwind CSS nei progetti esistenti. Tuttavia, è importante notare che il “reset” del CSS fornito da Tailwind (noto come Preflight) potrebbe influenzare gli stili già esistenti nel progetto. Una pratica comune consiste nell’utilizzare Tailwind soltanto per i nuovi componenti o moduli, gestendo con attenzione l’impatto dei suoi stili di base sugli elementi del progetto. Inoltre, è essenziale assicurarsi che i nomi delle classi generate da Tailwind non siano in conflitto con quelli già esistenti nel progetto; questo può essere fatto attraverso la configurazione appropriata di Tailwind. prefix Esiste un’opzione che consente di aggiungere un prefisso unificato a tutti i classi generati da Tailwind CSS.

Come personalizzare valori specifici che non esistono in Tailwind?

Nel modo JIT (Just-In-Time), è molto semplice personalizzare qualsiasi valore desiderato. È possibile utilizzare la sintassi tra parentesi quadre per specificare direttamente qualsiasi valore CSS all’interno del nome della classe. Ad esempio,top-[-113px]、bg-[#1da1f2] 或 w-[calc(100%-1rem)]Per i valori personalizzati che devono essere riutilizzati in tutto il sistema, si consiglia di… tailwind.config.js I documenti del theme.extend Definire alcune parti in modo specifico permette di mantenere l’coerenza del sistema di progettazione e di semplificare la manutenzione.