Costruire un sito web moderno e reattivo con Tailwind CSS: dalla guida introduttiva alle tecniche avanzate.

Che cos’è Tailwind CSS?

Tailwind CSS è un framework CSS incentrato sulle funzionalità, che aiuta gli sviluppatori a creare rapidamente interfacce utente fornendo una serie di classi pratiche e componibili di livello basso. A differenza di framework tradizionali come Bootstrap o Foundation, che offrono componenti predefiniti (come pulsanti, schede, ecc.), Tailwind CSS consente di personalizzare completamente l’aspetto delle interfacce in base alle esigenze specifiche del progetto.Tailwind CSS Ti permette di “assemblare” il tuo design applicando direttamente queste classi a livello di dettaglio (a livello molto preciso) all’interno del codice HTML.

La sua filosofia fondamentale è “l’efficacia al primo posto”. Questo significa che non è più necessario scrivere codice CSS personalizzato per ogni singolo elemento, né passare avanti e indietro tra i file HTML e CSS. Ad esempio, per creare un pulsante con bordi interni, uno sfondo blu e testo bianco, basta semplicemente scrivere:

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

In questo esempio,px-4 和 py-2 Sono stati impostati separatamente i margini interni sia in direzione orizzontale che verticale.bg-blue-500 È stata impostata un colore di sfondo.text-white Ho impostato il colore del testo.rounded-lg Sono stati aggiunti angoli arrotondati. Questo approccio ha notevolmente aumentato la velocità di sviluppo e la facilità di manutenzione, poiché lo stile è strettamente legato alla struttura HTML e i nomi delle classi sono estremamente autoesplicativi.

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

Come iniziare a utilizzare Tailwind CSS

Inizia a usarlo. Tailwind CSS Esistono diversi modi per farlo; il più comune è utilizzare lo strumento CLI ufficiale o integrarlo con gli strumenti di build.

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 →

Avviare rapidamente un progetto utilizzando la CLI di Tailwind.

Questo è il modo più diretto, particolarmente adatto per lo studio e lo sviluppo di prototipi rapidi. Prima di tutto, è necessario inizializzare il progetto utilizzando npm o yarn e installare i componenti necessari. Tailwind CSS。

npm install -D tailwindcss
npx tailwindcss init

Questo creerà il file di configurazione. tailwind.config.jsSuccessivamente, creare un file CSS (ad esempio…). src/input.cssE aggiungi le istruzioni di Tailwind:

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

Successivamente, utilizzare un comando della CLI per monitorare questo file CSS e compilare il codice, ottenendo così il CSS finale.

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

Infine, introducete il codice generato nel vostro file HTML. output.css Una volta scaricato il file, è possibile iniziare a utilizzare i classi pratici forniti da Tailwind.

Si consiglia di leggere Padroneggiare completamente Tailwind CSS: una guida pratica per creare siti web moderni e responsive。

Integrazione con i framework front-end

Tailwind CSS L’integrazione con i moderni framework front-end avviene in modo molto fluido. Ad esempio, nei progetti basati su Vue o React, è possibile utilizzare PostCSS per personalizzare l’aspetto del codice. Quando si utilizza Create React App, è possibile installare PostCSS tramite il processo di configurazione standard.

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

Questo processo genererà tutto contemporaneamente. tailwind.config.js 和 postcss.config.js File di configurazione. Successivamente, nel file CSS di ingresso del progetto (ad esempio…) src/index.cssAggiungi quelle tre righe al contenuto esistente. @tailwind Basta un semplice comando.

Concetti fondamentali e classi pratiche

Per utilizzarlo in modo efficiente… Tailwind CSSÈ essenziale comprendere il sistema di denominazione dei classi pratiche al suo nucleo, nonché i principi del design responsivo.

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.

Sistema di denominazione per classi pratiche

Tailwind CSS I nomi delle classi seguono un modello di denominazione uniforme, che di solito è “attributo-modificatore-valore”. Ad esempio:
Margini:m-4(Tutti i margini)mt-2(Margine superiore)
Colore:text-gray-800，bg-red-300
Dimensioni:w-64(Larghezza: 16rem)h-screen(Altezza: 100vh)
Layout:flex，justify-center，items-center

I numeri di solito corrispondono a un determinato sistema di design (spaziatura, dimensioni dei caratteri, ecc.) e si basano su un’unità di base di 4 pixel. Inoltre, supportano anche varianti legate allo stato dell’elemento, ad esempio quando l’elemento viene messo in evidenza (ad esempio, facendolo “on hover”).hover:bg-blue-700focusfocus:ring-2Basta aggiungere il prefisso che indica lo stato davanti al nome della classe.

Costruire un layout responsive

Tailwind CSS Si adotta una strategia responsive incentrata sui dispositivi mobili. I classi predefiniti sono progettati per i dispositivi mobili; per applicare gli stili su schermi più grandi, è necessario utilizzare i prefissi relativi alla rispondenza. Il sistema di breakpoint include… sm, md, lg, xl, 2xl。

Si consiglia di leggere Dall’approccio iniziale alla padronanza: impara a utilizzare Tailwind CSS per creare siti web moderni e responsive.。

Ad esempio, se un elemento ha una larghezza che copre interamente lo schermo su un telefono, si riduce a metà su uno schermo di dimensioni medie e a un quarto su uno schermo di grandi dimensioni, si può descrivere il comportamento del elemento in questo modo:

<div class="w-full md:w-1/2 lg:w-1/4">
  <!-- 内容 -->
</div>

Questo rende la creazione di interfacce responsive complesse estremamente semplice e intuitiva: tutte le regole relative alla rispondenza alle dimensioni dello schermo sono concentrate su un unico elemento, rendendole facilmente comprensibili a colpo d’occhio.

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

Pratica: Creare una barra di navigazione responsive

Costruiamo una barra di navigazione responsive moderna utilizzando le conoscenze apprese, attraverso un esempio completo.

Struttura HTML e stili per dispositivi mobili

Innanzitutto, costruiamo la struttura di base. Sul lato mobile, la barra di navigazione contiene solitamente l’identificativo del marchio e un pulsante che rappresenta il menu a forma di hamburger.

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 品牌标识 -->
      <div class="flex-shrink-0">
        <span class="text-white text-xl font-bold">Il mio sito web</span>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button id="menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
          <!-- 汉堡图标 SVG -->
          <svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900">Pagina iniziale</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Regarding</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">servizio</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contattare</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobile-menu" class="hidden md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Pagina iniziale</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Regarding</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">servizio</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contattare</a>
    </div>
  </div>
</nav>

Qui, utilizziamo… md:hidden 和 hidden md:block Per controllare la visualizzazione e la nascondimento di diversi elementi sia sul desktop che sui dispositivi mobili.

Aggiungere interattività e configurazioni personalizzabili

La barra di navigazione richiede JavaScript per controllare l’apertura e la chiusura del menu sui dispositivi mobili. Aggiungiamo quindi un semplice script:

<script>
  const menuBtn = document.getElementById('menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  menuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });
</script>

Inoltre, potresti voler modificare il colore del tema. Questo può essere fatto modificando le impostazioni relative al colore. tailwind.config.js Per implementare questo, è necessario utilizzare dei file. Ad esempio, per estendere la gamma di colori di un tema:

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3B82F6', // 自定义主色调
        'secondary': '#10B981',
      }
    }
  },
  variants: {},
  plugins: [],
}

In seguito, potrai utilizzare quel nome all’interno del nome della classe. bg-primary 和 text-secondary Con i file di configurazione, è possibile personalizzare completamente tutti i parametri di design, come gli spazi tra i caratteri, i font e i punti di interruzione del testo, in modo che si adattino perfettamente al sistema di design del proprio brand.

Riassumendo

Tailwind CSS Ha completamente cambiato il modo in cui i sviluppatori scrivono il CSS, introducendo un approccio basato sull’uso di “classi pratiche” (practical classes). Questo approccio incorpora direttamente le decisioni relative allo stile all’interno dei tag HTML, consentendo un’elevata efficienza di sviluppo e una maggiore coerenza nel design. Dallo sviluppo rapido di prototipi al creazione di componenti responsivi complessi, il suo sistema intuitivo di nomi delle classi e le sue potenti funzionalità di configurazione lo rendono ideale sia per il prototipaggio veloce che per progetti di produzione su larga scala. Comprendere i concetti fondamentali, come la denominazione delle classi pratiche, i prefissi per lo sviluppo di siti responsivi e la personalizzazione dei file di configurazione, è essenziale per creare siti web moderni e adattivi alle diverse dimensioni dello schermo.

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. In un ambiente di produzione…Tailwind CSS Utilizza PurgeCSS (o l’engine JIT integrato) per analizzare i file di template HTML, JavaScript e altri file correlati, rimuovendo automaticamente tutte le classi CSS non utilizzate. Il file CSS risultante pesa solitamente pochi KB, il che lo rende molto più leggero rispetto a molti framework tradizionali.

In un progetto di team, come mantenere l’omogeneità degli stili grafici (stili di formattazione, colori, font, ecc.)?

Tailwind CSS Promuove la coerenza fornendo un insieme di sistemi di design limitati (ad esempio, colori e proporzioni di spazi predefiniti). Inoltre, il team può collaborare per mantenere e ampliare un approccio uniforme nel lavoro. tailwind.config.js I file di configurazione permettono di definire i colori, i font e i punti di interruzione (breakpoints) specifici per un progetto. L’uso dell’istruzione `@apply` consente di estrarre dalle regole CSS combinazioni di classi utili e di trasformarle in classi componenti personalizzate, il che contribuisce notevolmente a migliorare l’omogeneità visiva dell’interfaccia.

Come sovrascrivere o personalizzare gli stili di un componente?

Ci sono principalmente tre modi per farlo. Il primo è utilizzare classi pratiche e più specifiche direttamente nell’HTML, ed è il metodo più comune. Il secondo consiste nell’estendere o sovrascrivere le impostazioni del tema all’interno di un file di configurazione. Il terzo metodo prevede l’utilizzo di file CSS. @apply Le istruzioni permettono di combinare più classi pratiche in una nuova classe, oppure di scrivere codice CSS personalizzato e utilizzarlo per modificare l’aspetto di un sito web. @layer L’istruzione serve per iniettare quel contenuto all’interno di Tailwind. base、components 或 utilities All’interno di uno strato (layer), è possibile controllarne la priorità.

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, ecc. Viene solitamente utilizzato come strumento di stile di base, collaborando con i sistemi di componenti di questi framework. Inoltre, esistono anche librerie di componenti UI costruite su Tailwind, come Headless UI (componenti interattivi senza stile ufficiali), DaisyUI, Flowbite, ecc., che forniscono componenti predefiniti e consentono allo stesso tempo una personalizzazione approfondita tramite Tailwind.