Introduzione e pratica con Tailwind CSS: costruire da zero interfacce web moderne e responsive

Che cos’è Tailwind CSS?

Tailwind CSS è un framework CSS incentrato sulle funzionalità, che ti aiuta a creare rapidamente design personalizzati fornendo un gran numero di classi pratiche e di livello basso. A differenza di framework come Bootstrap, che offrono componenti predefiniti (come pulsanti, schede), Tailwind fornisce le “classi atomiche” necessarie per costruire tali componenti, ad esempio quelle utili per controllare gli spazi interni (i margini). p-4Per controllare il colore del testo… text-blue-500 E controllare il layout delle caselle elastiche. flexIl concetto fondamentale di questo approccio consiste nell’inserire gli stili direttamente nell’HTML, il che aumenta notevolmente l’efficienza dello sviluppo e mantiene un’elevata coerenza nel design.

Il suo principio di funzionamento fondamentale…

Il motore principale di Tailwind è un plugin PostCSS scritto in JavaScript (Node.js). Durante il processo di compilazione, esamina i file del tuo progetto alla ricerca di tutte le classi utilizzate e genera soltanto i relativi stili CSS necessari nel file finale per l’ambiente di produzione. Questo processo è chiamato “Tree Shaking” e permette di ridurre al minimo la dimensione del file CSS risultante, evitando il problema di ridondanza tipico dei framework CSS tradizionali, che richiedono l’importazione di intere librerie. tailwind.config.js In questo file di configurazione vengono definite tutte le parametri di design, come i colori dei temi personalizzati, le proporzioni degli spazi tra elementi e i punti di interruzione (breakpoints).

Come iniziare a utilizzare Tailwind CSS

Esistono diversi modi per iniziare a utilizzare Tailwind CSS; il più consigliato è quello che prevede l’uso dell’strumento CLI ufficiale di Tailwind o l’integrazione con strumenti di build front-end. Di seguito è descritto il processo standard che utilizza npm e PostCSS, il quale permette di ottenere tutte le funzionalità disponibili di Tailwind CSS nonché le migliori prestazioni possibili per il proprio progetto.

Si consiglia di leggere Guida definitiva all’uso di Tailwind CSS: costruire interfacce moderne da zero。

Innanzitutto, è necessario inizializzare un progetto e installare Tailwind CSS insieme alle sue dipendenze tramite npm.

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
npx tailwindcss init

Dopo l’installazione, otterrai un… tailwind.config.js File: Hai bisogno di modificare il contenuto di quel file. content Questi campi servono per indicare a Tailwind quali file esaminare alla ricerca dei nomi delle classi da utilizzare. Di solito si tratta dei tuoi template HTML, dei file dei componenti JavaScript, e simili.

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

Successivamente, creare un file CSS principale (ad esempio…). src/input.cssE introduciamo anche le istruzioni fornite da Tailwind.

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

Infine, configuriamo il processo di compilazione. Se utilizzi uno strumento come Vite, devi assicurarti che la configurazione di PostCSS sia corretta. Crea un file di configurazione appropriato per PostCSS… postcss.config.js Documenti.

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

Ora, esegui il comando di compilazione (ad esempio…) npm run buildA seconda delle configurazioni del tuo script, Tailwind si occuperà dei tuoi file CSS per generare lo stile finale. A quel punto potrai iniziare ad utilizzare i classi forniti da Tailwind all’interno del tuo codice HTML.

Si consiglia di leggere Imparare a utilizzare Tailwind CSS: una guida pratica per passare dall’essenziale all’approfondimento, con le migliori pratiche.。

Core utility classes and responsive design

I class utili forniti da Tailwind coprono tutti gli aspetti del CSS: dalla disposizione dei contenuti, agli spazi tra elementi, alla formattazione del testo, fino ai background, ai bordi e agli effetti visivi. Il sistema di design di Tailwind presenta un elevato livello di coerenza: gli spazi tra elementi vengono definiti utilizzando proporzioni standard (ad esempio, multipli di 0,25rem), e i colori sono disponibili in una palette predefinita.

Classi per la disposizione e gli spazi tra elementi

Classi di layout, come… flex, grid, block, inline-block Può essere utilizzato direttamente. Lo spazio tra le parti può essere regolato tramite… p-{size}(Padding) e m-{size}(I margini) vengono utilizzati per controllare, ad esempio… p-4 Indica un margine interno pari a 1rem.mt-2 Indica un margine superiore di 0,5rem.

<div class="flex p-4 space-x-4">
  <div class="p-2 bg-gray-200">Progetto Uno</div>
  <div class="p-2 bg-gray-200">Progetto Due</div>
</div>

Prefix per i punti di interruzione responsivi

Il design responsive di Tailwind è una delle sue funzionalità più importanti. Include infatti cinque punti di interruzione (breakpoints) predefiniti:sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Aggiungendo un prefisso specifico prima dei nomi delle classi utilizzate, è possibile creare facilmente interfacce responsive. Ad esempio,md:flex Indica l’utilizzo di un layout flessibile per schermi di dimensioni medie e superiori.text-center lg:text-left Indica che il contenuto verrà visualizzato in posizione centrale per impostazione predefinita; su schermi più grandi, invece, verrà allineato a sinistra.

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.

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4">Il contenuto a sinistra.</div>
  <div class="w-full md:w-1/2 p-4">Il contenuto a destra.</div>
</div>

Pratica: Creare una barra di navigazione responsive

Mettiamo in pratica quanto appreso costruendo una barra di navigazione responsive comune. Questa barra di navigazione si visualizza in orizzontale su schermi grandi, mentre su schermi più piccoli si ripiega in un menu a forma di “hamburger”.

Innanzitutto, creiamo la struttura di navigazione orizzontale per lo schermo grande.

<nav class="bg-gray-800 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <!-- 品牌 Logo -->
    <a href="#" class="text-white text-xl font-bold">Il mio marchio.</a>
    <!-- 桌面端导航链接 -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-300 hover:text-white">Pagina iniziale</a>
      <a href="#" class="text-gray-300 hover:text-white">Regarding</a>
      <a href="#" class="text-gray-300 hover:text-white">servizio</a>
      <a href="#" class="text-gray-300 hover:text-white">Contattare</a>
    </div>
    <!-- 移动端菜单按钮 -->
    <button id="menuBtn" class="md:hidden text-white">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">...</svg>
    </button>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobileMenu" class="md:hidden hidden mt-2">
    <a href="#" class="block text-gray-300 hover:text-white py-2">Pagina iniziale</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">Regarding</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">servizio</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">Contattare</a>
  </div>
</nav>

Aggiungere funzionalità interattive

La struttura HTML sopra menzionata viene utilizzata per… hidden 和 md:flex Questi elementi hanno implementato un layout responsive. Per attivare o disattivare la visualizzazione del menu sui dispositivi mobili, è necessario utilizzare un po’ di JavaScript semplice.

Si consiglia di leggere Guida definitiva a Tailwind CSS: un tutorial pratico dall'introduzione all'approfondimento.。

// 简单的菜单切换逻辑
document.getElementById('menuBtn').addEventListener('click', function() {
  const menu = document.getElementById('mobileMenu');
  menu.classList.toggle('hidden');
});

Questo esempio mostra come, utilizzando soltanto le classi pratiche fornite da Tailwind e una semplice funzione JavaScript, sia possibile creare rapidamente un componente responsive completo e dall’aspetto professionale. È possibile modificare facilmente il suo aspetto in base al design del proprio brand, modificando classi come quelle relative al colore di sfondo, agli spazi tra gli elementi e agli effetti al passaggio del mouse.

Riassumendo

Tailwind CSS ha completamente rivoluzionato il modo in cui i sviluppatori front-end creano i propri stili, grazie alla sua metodologia basata sull’utilizzo di classi pratiche e orientate alle funzionalità desiderate. Elimina il costo legato ai continui passaggi tra i file HTML e CSS, garantisce l’coerenza dell’interfaccia utente (UI) grazie a un sistema di progettazione vincolante e assicura prestazioni elevate grazie a avanzate ottimizzazioni durante la fase di compilazione. Sia per semplici prototipi che per applicazioni aziendali complesse, Tailwind offre un’esperienza di sviluppo eccezionale e una maggiore facilità di manutenzione. Imparare a utilizzare le sue classi essenziali, i prefissi per la rispondenza dei dispositivi e i metodi di configurazione consentirà di migliorare notevolmente l’efficienza del proprio lavoro e le capacità di realizzazione di interfacce grafiche.

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

FAQ - Domande frequenti

I file CSS generati da Tailwind CSS tendono ad essere abbastanza grandi. Questo è dovuto al fatto che Tailwind utilizza un approccio “modulare” per la creazione di stili, che consente di definire separatamente vari aspetti dell’aspetto del sito web (come colori, font, layout, ecc.), permettendo di riutilizzare facilmente questi elementi in più parti del sito. Tuttavia, è possibile personalizzare il livello di complessità dei file CSS per ridurnne le dimensioni, ad esempio eliminando gli

No, ed è proprio questo il genio del design di Tailwind. Durante la fase di build per l’utilizzo in produzione, Tailwind utilizza PurgeCSS (ora integrato direttamente nell’engine) per eliminare tutti i codici CSS non necessari. PurgeCSS analizza i file HTML, JavaScript e altri file di template e conserva soltanto le classi CSS effettivamente utilizzate. Il file CSS risultante pesa solitamente tra pochi KB e alcuni decine di KB, il che lo rende molto più leggero rispetto a molti framework CSS tradizionali.

Scrivere così tanti nomi di classi in HTML potrebbe rendere il codice più difficile da leggere e mantenere.

Questa è davvero una preoccupazione comune nelle fasi iniziali dello sviluppo. L’esperienza ha dimostrato che posizionare gli stili e la struttura in aree vicine tra loro riduce effettivamente lo sforzo cognitivo necessario per trovare e modificare gli stili. Per i componenti più complessi, puoi utilizzare Tailwind CSS. @apply Le istruzioni prevedono l’estrazione dei classi pratici e comunemente utilizzati nel codice CSS, al fine di creare componenti personalizzati. Inoltre, estensioni efficaci per gli editor (come Tailwind CSS IntelliSense) offrono funzionalità di completamento automatico del codice e visualizzazione delle modifiche in anteprima al passaggio del mouse, migliorando notevolmente l’esperienza di sviluppo.

Con quali framework JavaScript è possibile utilizzare Tailwind CSS?

Tailwind CSS è un framework indipendente, in grado di integrarsi perfettamente con qualsiasi framework o libreria front-end. È ampiamente supportato e utilizzato nella comunità di sviluppatori per tecnologie come React, Vue.js, Angular, Svelte, nonché per generatori di siti statici tradizionali come Next.js, Nuxt.js, Gatsby e Hugo. Il suo processo di lavoro (scansione dei file e generazione dei codici di stile) può essere integrato senza problemi nelle catene di build di questi framework.

Come personalizzare il tema predefinito di Tailwind CSS, ad esempio i colori del marchio?

I temi personalizzati vengono modificati principalmente modificando i file presenti nella directory radice del progetto. tailwind.config.js Per completare la configurazione, utilizza il file di configurazione appropriato. Puoi farlo… theme.extend Aggiungere o sovrascrivere i valori predefiniti all’oggetto. Ad esempio, per aggiungere un colore di marca personalizzato, è possibile configurarlo in questo modo:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      }
    }
  }
}

Dopo aver completato la configurazione, potrai utilizzarla all’interno del progetto. bg-brand-blue 或 text-brand-blue Una classe del genere… Tutti i parametri fondamentali, come le dimensioni, i font e i punti di interruzione del codice, possono essere personalizzati in modo simile.