Guida pratica al Tailwind CSS in cinese: costruire un'interfaccia utente moderna e reattiva da zero.

Che cos’è Tailwind CSS?

Tailwind CSS è un framework CSS incentrato sulle funzionalità: fornisce una serie di classi pratiche e combinabili di livello basso, che permettono agli sviluppatori di creare rapidamente design personalizzati direttamente nell’HTML. A differenza di framework CSS tradizionali come Bootstrap o Bulma, Tailwind non offre componenti predefiniti (come menu a discesa o barre di navigazione), ma piuttosto un insieme di classi “atomiche” che corrispondono a singoli attributi del CSS. text-center Corrispondente text-align: center;，mt-4 Corrispondente margin-top: 1rem;Combinando queste classi, gli sviluppatori possono creare qualsiasi tipo di design visivo senza dover scrivere codice CSS personalizzato. Questo permette di mantenere un alto livello di personalizzazione e, allo stesso tempo, di aumentare notevolmente l’efficienza dello sviluppo.

La sua filosofia fondamentale è: “Le restrizioni portano alla libertà”. Grazie a un sistema di progettazione ben concepito (spaziatura, colori, dimensioni dei caratteri, ecc.), Tailwind garantisce coerenza nel design. Inoltre, supporta l’utilizzo di file di configurazione per personalizzare ulteriormente le impostazioni. tailwind.config.js È possibile personalizzare completamente questo sistema di design in modo che si adatti senza problemi a qualsiasi stile di marca. Inoltre, eliminando gli stili non utilizzati, la versione “produttiva” di Tailwind risulta molto più compatta, il che migliora le prestazioni di caricamento per l’utente finale.

Configurazione dell’ambiente e inizializzazione del progetto

Esistono diversi modi per iniziare a utilizzare Tailwind CSS: tramite CDN, con PostCSS o attraverso lo strumento CLI fornito dal progetto stesso. Per i progetti front-end moderni, il metodo più consigliato è l’integrazione con PostCSS, poiché offre il set più completo di funzionalità e supporta l’ottimizzazione per l’utilizzo in ambiente di produzione.

Si consiglia di leggere Imparare a utilizzare Tailwind CSS: una guida pratica per lo sviluppo di componenti, dall’approccio iniziale alla padronanza completa。

Per installare utilizzando PostCSS, segui questi passaggi:

Prima di tutto, ti servirà un ambiente Node.js. Puoi inizializzare un progetto utilizzando npm o yarn e installare Tailwind. Per un progetto nuovo, il passaggio più comune consiste nell’installare i pacchetti necessari tramite npm. Devi quindi installare… tailwindcss In sé, e anche… postcss 和 autoprefixerPerché Tailwind è un plugin per PostCSS.

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 init -y
npm install -D tailwindcss postcss autoprefixer

Successivamente, esegui. npx tailwindcss init Comando per generare il file di configurazione di Tailwind tailwind.config.jsInoltre, è necessario creare un file di configurazione per PostCSS. postcss.config.jsE configurare Tailwind e autoprefixer al suo interno.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Introdurre lo stile di Tailwind

Dopo l’installazione, è necessario inserire le istruzioni di Tailwind nel file di configurazione CSS del progetto. Di solito, questo file ha il nome “style.css”. src/styles.css 或 input.css。

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

@tailwind base Le istruzioni in questione iniettano lo stile di base fornito da Tailwind, rimuovono lo stile predefinito del browser e impostano alcune regole fondamentali.@tailwind components Verrà iniettato qualsiasi cosa tu abbia fornito. @apply Classe di componenti personalizzati registrata tramite un comando o un file di configurazione.@tailwind utilities Verranno inserite tutte le classi utili fornite da Tailwind.

Infine, è necessario creare il file CSS. Se si utilizzano strumenti di packaging come webpack o Vite, e il plugin PostCSS è configurato correttamente, essi si occuperanno automaticamente dell’elaborazione del codice CSS. È anche possibile utilizzare la CLI di Tailwind per monitorare e compilare i file CSS necessari.npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watchDopo la compilazione, introducete il file di output nell’HTML. output.css Basta così.

Si consiglia di leggere Analisi approfondita del framework CSS Tailwind: dall’introduzione alla pratica。

Core utility classes and responsive design

Il cuore di Tailwind CSS risiede nella sua vasta e sistematica libreria di classi pratiche. Comprendere le regole di denominazione di queste classi è fondamentale per un utilizzo efficace del framework.

Panoramica sui tool più utilizzati

I nomi delle classi in Tailwind seguono generalmente il formato “attributo-valore”, dove il valore è definito in base alla scala del sistema di design (ad esempio: 0, 1, 2, 4, 6, 8…). Ecco un esempio:
Spaziatura (Spacing):m-4(margin: 1rem)p-2(padding: 0.5rem)mt-8(margin-top: 2rem).
– Tipografia:text-lg(font-size: 1.125rem)font-bold(font-weight: 700)text-gray-800(colore: #2d3748).
Sfondo e bordo:bg-blue-500(`background-color`),border，rounded-lg(border-radius: 0.5rem);
Layout:flex，items-center(align-items: center)justify-betweenjustify-content: space-between;

Realizzare un layout responsive.

Tailwind utilizza una strategia di progettazione responsive incentrata sui dispositivi mobili. I classificatori predefiniti sono pensati per i dispositivi mobili (con schermi piccoli). Per applicare stili a schermi più grandi, è necessario utilizzare prefissi responsive. md:、lg:、xl:、2xl:。

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.

Questi punti di interruzione possono essere utilizzati… tailwind.config.js I documenti del theme.screens È possibile personalizzarne alcune parti. Ecco un esempio tipico di stile per un pulsante responsive:

<button class="text-sm bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 md:text-base lg:py-3 lg:px-6">
  响应式按钮
</button>

In questo esempio, i pulsanti sui dispositivi mobili utilizzano un carattere di dimensioni ridotte.text-sm), su schermi di dimensioni medie (md:Per i valori di dimensione del carattere pari o superiori a …, si utilizza la dimensione di carattere di base.md:text-base…) su grandi schermi (…)lg:Ha un margine interno più ampio.lg:py-3 lg:px-6L’effetto di “fading in” (o “fading out”) viene attivato quando si posiziona il mouse sopra l’elemento visualizzato sullo schermo. hover: Implementazioni alternative. Questo metodo di scrivere logiche responsive in modo dichiarativo all’interno di HTML è molto intuitivo.

Configurazioni personalizzate e utilizzi avanzati

Il punto di forza di Tailwind è la sua elevata personalizzabilità. Attraverso i file di configurazione, è possibile estendere o sostituire completamente i temi predefiniti.

Si consiglia di leggere Sblocca le potenti funzionalità di Tailwind CSS: una guida completa al framework CSS che dà priorità all'utilità.。

Configurazione avanzata dei temi

tailwind.config.js È il nucleo fondamentale della personalizzazione: puoi modificarlo o adattarlo a seconda delle tue esigenze. theme.extend Aggiungere nuovi valori all’oggetto significa che questi verranno combinati con il tema predefinito, anziché sovrascriverlo. Ad esempio, è possibile aggiungere un nuovo colore del brand o impostare una distanza personalizzata tra i vari elementi dell’interfaccia.

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        'brand': '#5c6ac4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Dopo aver completato la configurazione, potrai utilizzarla all’interno del progetto. bg-brand 和 w-128 Una classe del genere… quella presente nella configurazione. content I campi in questione sono di fondamentale importanza: vengono utilizzati per indicare a Tailwind quali file esaminare al fine di effettuare l’operazione di “tree-shaking”, che consente di eliminare tutte le classi di stile non utilizzate durante la fase di compilazione del prodotto. Questo processo garantisce la riduzione al minimo del file CSS, contribuendo così a migliorare le prestazioni del sito web.

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

Creare una classe di componenti riutilizzabili

Anche se si consiglia di utilizzare direttamente le classi pratiche all’interno dell’HTML, per i combinamenti di stili complessi che si ripetono frequentemente all’interno di un progetto, è possibile estrarli e trasformarli in classi componenti. Esistono diversi modi per farlo:

1. Utilizzare @apply Instruction: Nel file CSS, è possibile utilizzare… @apply Combinare più classi pratiche in una nuova classe.

    .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 si può utilizzare in HTML. <button class="btn-primary">。

2. Utilizzo di componenti basati su framework JavaScript: Nei framework come React, Vue o Svelte, la pratica consigliata è quella di combinare e incapsulare tali stili all’interno di componenti UI riutilizzabili. <Button>In questo modo si mantiene la flessibilità di Tailwind, al contempo ottenendo la manutenibilità tipica dei componenti modulari.

Inoltre, Tailwind dispone di un ricco ecosistema di plugin, tra cui quelli ufficiali. @tailwindcss/forms(Optimizzazione dello stile dei moduli)@tailwindcss/typography(Per la formattazione del contenuto degli articoli), è possibile espandere ulteriormente le sue funzionalità.

Riassumendo

Tailwind CSS ha completamente rivoluzionato il modo in cui scriviamo il CSS, offrendo un insieme di strumenti atomici estremamente potenti. Abbandona le restrizioni legate ai componenti predefiniti, dando agli sviluppatori una flessibilità illimitata e un controllo totale sui dettagli del design. Il suo approccio al design responsivo incentrato sulle esigenze dei dispositivi mobili, le sue avanzate funzionalità di personalizzazione e la capacità di generare file CSS estremamente compatti grazie a tecniche di ottimizzazione, lo rendono particolarmente adatto a qualsiasi scenario, dai prototipi rapidi ai progetti di produzione su larga scala. Imparare e adattarsi alle regole di denominazione dei suoi classi richiede un po“ di tempo, ma una volta acquisite, si ottiene una velocità e una coerenza nell’ambito dello sviluppo dell’interfaccia utente senza precedenti. In combinazione con le altre tecnologie del front end moderno, Tailwind CSS rappresenta senza dubbio uno strumento eccezionale per creare interfacce utente moderne, performanti e responsive.

FAQ - Domande frequenti

I nomi delle classi di Tailwind sono molti, e l'HTML sembra molto disordinato. Cosa posso fare al riguardo?

Questo è effettivamente un problema comune tra i principianti. Man mano che la complessità dei progetti aumenta, i nomi delle classi in HTML possono diventare più lunghi. La migliore pratica per risolvere questo problema è quella di adottare un approccio di sviluppo basato sull’uso di componenti. In framework come React e Vue, è consigliabile incapsulare i blocchi di interfaccia utente in componenti riutilizzabili. In questo modo, i nomi delle classi lunghi vengono contenuti all’interno dei template o delle funzioni di rendering dei componenti, mentre all’esterno viene fornita un’interfaccia semplice e comprensibile. <Card>、<Navbar>Inoltre, è importante utilizzare tali risorse in modo razionale. @apply Estrarre le combinazioni di stili ripetute dalle istruzioni di formattazione permette anche di rendere il codice HTML più semplice e leggibile.

Il utilizzo di Tailwind CSS aumenta la dimensione del file finale prodotto dopo il processo di compressione e packaging del codice sorgente?

Esattamente il contrario: Tailwind CSS di solito riduce notevolmente le dimensioni del codice CSS utilizzato nell’ambiente di produzione. La chiave sta nel suo meccanismo di ottimizzazione chiamato “Tree Shaking”. Questo processo permette di eliminare il codice non necessario, riducendo così il file CSS finale. Tutto ciò è possibile grazie a una configurazione corretta di Tailwind CSS. tailwind.config.js 中的 content Il tool di sviluppo Tailwind analizza i file del progetto (HTML, JSX, Vue, ecc.) per individuare tutte le classi utilizzate effettivamente, e poi compila soltanto quegli stili nel file CSS finale. Questo significa che, indipendentemente dalle dimensioni del repository sorgente di Tailwind, il file CSS scaricato dall’utente contiene soltanto i componenti di stile di cui ha bisogno, con dimensioni che solitamente vanno da pochi KB a una dozzina di KB.

Come modificare i colori di base o il sistema di spaziatura predefiniti da Tailwind?

È possibile farlo completamente modificando i codici o le configurazioni esistenti. tailwind.config.js Il file è personalizzato. theme.extend Aggiungendo nuovi valori agli oggetti, si espande il tema predefinito. Se desideri sovrascrivere completamente un determinato valore associato a una chiave del tema (ad esempio… colors 或 spacingIn tal caso, basta procedere direttamente con… theme Giù (e non…) extend Definisci questa chiave: la nuova definizione sostituirà completamente il valore predefinito. Ad esempio,theme: { colors: { primary: '#ff0000' } } Verranno rimossi tutti i colori predefiniti, lasciando solo quelli che hai definito tu. primary Colore.

Con quali librerie o framework di interfaccia utente (UI) è possibile utilizzare Tailwind CSS?

Tailwind CSS si integra perfettamente con quasi tutti i moderni framework front-end, tra cui React, Vue, Angular, Svelte, Next.js, Nuxt.js, Gatsby e altri. I suoi stili sono rappresentati da semplici classi CSS, senza alcun bisogno di un ambiente di esecuzione JavaScript specifico. Per questo motivo, può essere utilizzato ovunque sia possibile scrivere codice HTML. Molte librerie di componenti UI popolari, come Headless UI (una libreria di componenti senza stili ufficiale) e DaisyUI (una libreria di componenti basata su Tailwind), sono state progettate appositamente per Tailwind, permettendo un’integrazione senza problemi e migliorando notevolmente l’efficienza dello sviluppo.