Creare un sito web moderno e reattivo: padroneggiare il framework Tailwind CSS da zero.

Nel campo dello sviluppo front-end moderno, i framework CSS basati sul principio “Utility-First” (Prima di tutto l’efficacia funzionale) stanno diventando la scelta predominante per creare interfacce efficienti e facilmente mantenibili. Tra questi…Tailwind CSS Si distingue per la sua elevata flessibilità e l’efficienza nel processo di sviluppo. È diverso dalle tradizionali librerie di componenti (come…) BootstrapNon fornisce componenti predefiniti per pulsanti o schede, ma offre un insieme di classi di tool a livello di dettaglio, che permettono agli sviluppatori di creare qualsiasi tipo di design combinando direttamente queste classi all’interno del codice HTML.

La filosofia fondamentale di questo approccio consiste nel trasferire le decisioni relative allo stile dai file CSS direttamente nel linguaggio di markup, eliminando così il carico cognitivo legato ai continui spostamenti tra i file di stile e il codice HTML. Questo viene realizzato utilizzando strumenti e tecniche come… flex、pt-4、text-center 和 rotate-90 Con un approccio del genere, è possibile creare interfacce in modo intuitivo, mantenendo al contempo il file CSS il più compatto possibile in termini di dimensioni.

Perché scegliere Tailwind CSS?

Tra i numerosi framework CSS…Tailwind CSS Le sue vantaggi unici la rendono la scelta preferita da molti sviluppatori e team.

Si consiglia di leggere Sblocca Tailwind CSS: una guida pratica allo sviluppo front-end, dall'introduzione all'approfondimento.。

Elevatissima efficienza e flessibilità nello sviluppo.

Nella tradizionale scrittura di CSS, è necessario assegnare un nome a ciascun elemento e definire le regole relative in un file di stili separato. Questo processo spesso porta all’uso eccessivo di nomi di classi e a conflitti di stili. Tailwind CSS Offrendo un insieme completo di classi di strumenti a livello di dettaglio elevato, è possibile applicare stili direttamente nell’HTML. Ad esempio, per creare un pulsante con bordi interni, uno sfondo blu e testo bianco, è sufficiente scrivere:

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 →

<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">
  点击我
</button>

Questo approccio accelera notevolmente la velocità di progettazione dei prototipi e degli iterazioni di sviluppo, poiché non è necessario passare da un file all’altro, né preoccuparsi di come denominare uno stile che verrà utilizzato esclusivamente in quel contesto.

Un sistema di progettazione altamente personalizzabile

Tailwind CSS Tutto è configurabile. Attraverso il file situato nella directory radice del progetto… tailwind.config.js Con i file di configurazione, puoi controllare completamente il sistema di progettazione del progetto. Puoi definire i tuoi pannelli di colori personalizzati, le proporzioni degli spazi, i punti di interruzione del codice, le dimensioni dei caratteri, e molto altro ancora. Ad esempio, puoi facilmente modificare il colore di sfondo predefinito (blu) in quello del tuo marchio.

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

Dopo la configurazione, potrai utilizzarla all’interno del progetto. bg-brand-blue Ecco un esempio di questo tipo di classe. Questo design consente… Tailwind CSS È in grado di integrarsi perfettamente in qualsiasi norma di progettazione esistente, senza costringerti ad adattarti all’estetica del framework utilizzato.

Ottimizzazione durante la fase di costruzione e un volume di produzione estremamente ridotto.

Tailwind CSS Usare PurgeCSS(Nelle versioni più recenti, questo processo è chiamato “scansione del contenuto”) e serve ad ottimizzare la creazione dei file di produzione. Esamina i file del tuo progetto (HTML, JavaScript, componenti Vue, React) per individuare tutte le classi di tool utilizzate, eliminando poi tutto il CSS non necessario. Il risultato è un file CSS che contiene soltanto gli stili effettivamente utilizzati; di solito, tale file può essere compresso fino a dimensioni inferiori ai 10 KB, garantendo così prestazioni eccezionali.

Si consiglia di leggere Esplora Tailwind CSS: una guida pratica alle tecniche, dall'introduzione all'approfondimento.。

Come iniziare a utilizzare Tailwind CSS

将 Tailwind CSS L’integrazione nel tuo progetto è molto semplice e ci sono due principali metodi: puoi sperimentare rapidamente l’utilizzo del servizio tramite un CDN, oppure procedere con uno sviluppo più avanzato utilizzando gli strumenti disponibili.

Sperimenta velocemente tramite il CDN.

Per lo studio, la progettazione di prototipi o semplici demo, è possibile importare i contenuti direttamente tramite collegamenti CDN. Basta inserire tali collegamenti nel file HTML. <head> Aggiungi il seguente codice all’interno dell’etichetta:

<script src="https://cdn.tailwindcss.com"></script>

Questo è il modo più semplice per iniziare, ma tieni presente che non è possibile utilizzarlo. Tailwind CSS Alcune funzionalità avanzate, come la configurazione personalizzata e le istruzioni…@apply、@variantsInoltre, e soprattutto, include funzionalità per l’ottimizzazione dell’ambiente di produzione (Purge). Pertanto, non è consigliato per progetti di produzione ufficiali.

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.

Installazione professionale tramite PostCSS

Per i progetti a livello di produzione, si consiglia di utilizzare il metodo di installazione di PostCSS, poiché questo permette di disporre di funzionalità avanzate e di una maggiore flessibilità nell’gestione dei codici CSS. Tailwind CSS Utilizzando npm o yarn, inizializza il progetto e installa tutte le dipendenze necessarie.

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

Successivamente, creare… postcss.config.js File, e configuralo per il suo utilizzo. Tailwind CSS 和 Autoprefixer：

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

Poi, nel tuo file CSS principale (ad esempio…) src/styles.cssIn questo contesto, viene introdotto… Tailwind CSS Istruzioni:

Si consiglia di leggere Padroneggiare i concetti fondamentali di Tailwind CSS: dalle classi pratiche alle applicazioni pratiche di progettazione responsive。

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

Infine, assicurati che… tailwind.config.js Il file contiene le informazioni relative ai percorsi dei file, il che permette agli strumenti di eseguire correttamente le operazioni di scansione e ottimizzazione.

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

Ora puoi utilizzare liberamente tutte le classi di strumenti all’interno dell’HTML del progetto o dei componenti. Per farlo, esegui il comando di compilazione (ad esempio…). npm run build），Tailwind CSS Verrà generato un file di stili ottimizzato.

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

Core utility classes and responsive design

Tailwind CSS La classe di strumenti in questione copre quasi tutti gli attributi CSS più comuni e include un potente sistema di progettazione responsive.

Panoramica sui tool più utilizzati

I classi di strumenti seguono un modello di denominazione uniforme, il che ne facilita la memorizzazione. Ad esempio:
Layout:flex, grid, block, hidden
Spaziatura:p-4(Padding)m-2(Margine esterno)mt-8(Margine superiore)
Dimensioni:w-full(Larghezza: 100%)h-screen(L’altezza corrisponde all’altezza della viewport.)
Colore:bg-gray-100(Colore di sfondo),text-red-500(Colore del testo)
Tipografia:text-xl(Dimensione del carattere)font-bold(Grassetto)text-center(Allineamento del testo)

Realizzare un layout responsive.

Il design reattivo è Tailwind CSS I suoi punti di forza risiedono nell’utilizzo di un sistema di punti di interruzione (breakpoints) orientato ai dispositivi mobili: i stili predefiniti sono infatti progettati per i dispositivi mobili, e gli stili da applicare su schermi più grandi vengono specificati tramite prefissi. I prefissi per i punti di interruzione includono:
- sm: (640px)
- md: (768px)
- lg: (1024px)
- xl: (1280px)
- 2xl: (1536 pixel)

Ad esempio, creare un layout con due colonne che si sovrappongono sulle piattaforme mobili e che appariscono affiancate su schermi di dimensioni medie:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4 bg-blue-100">Colonna a sinistra</div>
  <div class="w-full md:w-1/2 p-4 bg-green-100">Colonna a destra</div>
</div>

Puoi anche controllare facilmente la visualizzazione e la nascondimento degli elementi:hidden md:block Indica che il contenuto verrà visualizzato su schermi di dimensioni medie o superiori, mentre sarà nascosto sui dispositivi mobili.

Stati di hover e di focalizzazione

Tailwind CSS Includono anche varianti di stato, che ti permettono di aggiungere facilmente stili agli elementi interattivi. Basta semplicemente aggiungere il prefisso “stato” davanti al nome della classe di strumenti utilizzata. hover:、focus:、active:。

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  交互按钮
</button>

È anche possibile farlo direttamente nel file di configurazione. variants Le opzioni consentono di personalizzare quali classi di strumenti supportino quali stati.

Funzionalità avanzate e personalizzazioni

Una volta che ti sarai familiarizzato con l’uso di base,Tailwind CSS Le funzionalità avanzate disponibili ti aiuteranno a scrivere codice più semplice da comprendere e più facile da mantenere.

Estrazione dei componenti e riutilizzo degli stili

Anche se è conveniente utilizzare i classificatori direttamente nell’HTML, la ripetizione del codice diventa ridondante quando lo stesso insieme di stili complessi deve essere applicato in più parti del sito. In questi casi, è possibile utilizzare… @apply Le istruzioni in CSS servono per estrarre i nomi delle classi dei componenti.

/* 在你的CSS文件中，例如 styles.css */
.btn-primary {
  @apply px-4 py-2 bg-blue-600 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 è possibile utilizzare direttamente questa classe personalizzata.<button class=“btn-primary”>Questo approccio mantiene la comodità tipica degli strumenti utilizzati per lo sviluppo software, evitando al contempo la ripetizione del codice.

Utilizzare plugin per espandere le funzionalità.

Tailwind CSS Disponi di un ricco ecosistema di plugin. Puoi installare plugin ufficiali o creati dalla comunità per aggiungere nuove funzionalità al tuo software. Ad esempio,@tailwindcss/forms Il plugin fornisce agli elementi dei form un aspetto più gradevole grazie agli stili predefiniti.@tailwindcss/typography I plugin permettono di migliorare rapidamente l’aspetto del contenuto HTML generato in modo imprevedibile da un CMS (ad esempio, gli articoli di un blog). Dopo l’installazione, basta semplicemente… tailwind.config.js 的 plugins Basta introdurlo nell’array.

Configurazione personalizzata in modo approfondito

Quasi tutti i token di design possono essere utilizzati… tailwind.config.js È possibile personalizzarlo secondo le proprie esigenze. È anche possibile espanderne le funzionalità.extendIl tema predefinito può essere modificato o sostituito completamente.themeAd esempio, è possibile personalizzare gli angoli arrotondati, gli effetti di ombra, e persino aggiungere nuove varianti di componenti (tool classes).

module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  },
  variants: {
    extend: {
      backgroundColor: ['active'], // 为背景色工具类启用 active 状态
    }
  }
}

Riassumendo

Tailwind CSS Attraverso un approccio basato sulla priorizzazione, ha completamente cambiato il modo in cui i sviluppatori scrivono il CSS. Riporta le decisioni relative allo stile al livello dei tag, e grazie all’utilizzo di classi di tool a livello di dettaglio, consente una velocità di sviluppo e una flessibilità progettuale senza eguali. Il suo sistema di design altamente personalizzabile lo rende adatto a qualsiasi brand o specifica di progettazione, mentre le ottimizzazioni durante la fase di costruzione garantiscono prestazioni eccellenti nel prodotto finale. Che si tratti di prototipi rapidi o di applicazioni aziendali complesse…Tailwind CSS Tutti questi strumenti offrono soluzioni di stile potenti, efficienti e facili da mantenere. Impararne l’uso significa padroneggiare uno degli strumenti fondamentali per creare interfacce web moderne e responsive.

FAQ - Domande frequenti

Quali sono le differenze tra Tailwind CSS e Bootstrap?

Tailwind CSS È un framework CSS basato sul principio del “Utility-First” (priorità alle funzionalità pratiche), che non fornisce componenti predefiniti con stili specifici (come barre di navigazione o schede). Offre invece classi di base che permettono di creare componenti completamente personalizzati combinandole tra loro.

Bootstrap Si tratta di una libreria di componenti tradizionale che offre una serie di componenti già progettati e con stili predefiniti. Sebbene fornisca anche alcune classi di strumenti, il suo elemento centrale sono i componenti pronti all’uso. Bootstrap È possibile creare rapidamente interfacce con uno stile uniforme, tuttavia una personalizzazione approfondita richiede spesso l’alterazione di un gran numero di stili predefiniti. Tailwind CSS Fin dalle fasi iniziali, è stata promossa e realizzata la possibilità di una completa personalizzazione.

Scrivendo molti nomi di classi direttamente nell'HTML, il codice potrebbe diventare confuso, non è vero?

Questo è un timore comune nelle fasi iniziali dello sviluppo. In realtà, rispetto alla scrittura di regole per innumerevoli nomi di classi personalizzate all’interno di un file CSS, è molto più semplice e intuitivo leggere descrizioni degli stili direttamente nell’HTML. flex items-center justify-betweenSpesso è più chiaro e più facile da mantenere. Elimina il bisogno di spostarsi tra i file e di occuparsi della loro denominazione.

Per combinazioni di stili complesse e ripetute, è possibile utilizzare… @apply Le istruzioni o i componenti di un framework modulare (come i componenti di React o Vue) vengono utilizzati per incapsulare i codici, al fine di mantenere l’HTML ordinato e leggibile. Inoltre, il team può garantire la coerenza nel codice stabilendo convenzioni specifiche per la composizione dei nomi delle classi.

Come aggiungere colori o dimensioni personalizzati a Tailwind CSS?

Tutti i file personalizzati si trovano nella directory radice del progetto. tailwind.config.js Il file è stato completato. Puoi… theme.extend Aggiungere nuovi elementi di configurazione all’oggetto per estendere il tema predefinito.

Ad esempio, per aggiungere un colore personalizzato, si può scrivere così:

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-gray': '#f5f5f5',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

In seguito, potrai utilizzarlo. bg-custom-gray 和 w-128 Una classe del genere.

Il Tailwind CSS influisce sulla performance di un sito web?

Esattamente il contrario.Tailwind CSS Dopo una corretta configurazione, le prestazioni vengono solitamente notevolmente migliorate. Il processo di produzione e compilazione utilizza la tecnologia PurgeCSS, che esamina tutti i file di template e include soltanto i classi CSS effettivamente utilizzati nel file di stile finale. Di conseguenza, il file CSS risultante è molto piccolo (spesso inferiore a 10 KB), il che riduce il carico sulle richieste di rete e velocizza il caricamento delle pagine.

Supporta il modalità notturna (dark mode)?

Sì,Tailwind CSS Il supporto per il “modalità scura” (dark mode) è già disponibile all’uso immediato. Puoi… tailwind.config.js Il documento è stato approvato dal Consiglio di Stato cinese il 22 novembre 2019. darkMode: ‘class’ 或 darkMode: ‘media’ Per abilitarlo, segui le istruzioni fornite. Una volta attivato, potrai utilizzarlo come previsto. dark: Utilizzare i prefissi delle varianti per applicare lo stile in modalità “oscura”.

Ad esempio,dark:bg-gray-800 Indica che, in modalità notturna (modalità scura), verrà utilizzato uno sfondo di colore grigio scuro. Se impostato in questo modo… ‘class’ Per questo modello, devi inserire l'elemento radice dell'HTML (come <). <html>Aggiungere o rimuovere manualmente class=“dark” Per cambiare modalità: se impostato su… ‘media’Allora, il colore verrà automaticamente modificato in base alle preferenze di colore dell’operativo utilizzato dall’utente.