## Tavola dei contenuti
- [Installazione](#installazione)
- [Configurazione](#configurazione)
- [Core Concepts](#core-concepts)
- No.
[Flexbox & Grid](#flexbox--grid)
[Spacing](#spacing)
- Si'.
- (tipografia)
- No, no.
- [Bordini](#borders)
- [Effects](#effetti)
- [Filtri]
- [Tavole]
- [Transitions & Animation](#transitions--animation)
- [Transforms](#transforms)
- [Interattività](#interattività)
[SVG](#svg)
- [Accessibilità](#accessibilità)
- [Responsive Design](#responsive-design)
- [Modalità Dark]
- [Customization](#customization)
- [Componenti]
[Le migliori pratiche](#best-practices)
## Installazione
### CDN (Quick Start)
Traduzione:
### Installa via npm
Traduzione:
## # Vite Setup
Traduzione:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
## Next.js Setup
Traduzione:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
## Configurazione
# Configurazione di base
Traduzione:
### Configurazione avanzata
Traduzione:
## Core Concepts
### Utility-First Fondamenti
Traduzione:
### Hover, Focus, and Other States
Traduzione:
### Responsive Modifiers
#
# Layout #
#### Container
Traduzione:
### Box Sizing
Traduzione:
### Display
Traduzione:
# # Floats #
Traduzione:
### Clear
Traduzione:
### Object Fit
Traduzione:
### Posizione oggetti
Traduzione:
### Overflow
Traduzione:
### Posizione
Traduzione:
### Top / Right / Bottom / Left
Traduzione:
### Visibilità
Traduzione:
## Z-Index #
Traduzione:
# Flexbox & Grid
### Flex Direction
Traduzione:
## Flex Wrap
Traduzione:
##
Traduzione:
## Flex Grow
Traduzione:
## Flex Shrink
Traduzione:
### Ordine
Traduzione:
### Grid Template Columns
Traduzione:
# Avvio / Fine della colonna Griglia
Traduzione:
# righe modello Grid
Traduzione:
# Griglia Avvio riga / Fine
#
## Gap #
Traduzione:
### Justify Content
Traduzione:
### Justify Items
Traduzione:
## Justify Self
Traduzione:
### Align Content
Traduzione:
### Align Items
Traduzione:
## Align Self
Traduzione:
# Luogo Contenuto
Traduzione:
# Luogo oggetti
Traduzione:
# Luogo di auto
Traduzione:
## Spacing
### Imbottitura
Traduzione:
## Margin #
Traduzione:
# spazio tra
Traduzione:
# Sizing #
### Width
Traduzione:
## Min-Width #
Traduzione:
## Max-Width #
Traduzione:
### Altezza #
Traduzione:
## Min-Height #
Traduzione:
## Max-Height #
Traduzione:
#
### Font Family
__________
### Font Size
Traduzione:
### Font Smoothing
Traduzione:
### Font Style
Traduzione:
### Font Peso
Traduzione:
### Font Variant Numeric #
Traduzione:
### Letter Spacing
Traduzione:
# Altezza della linea
Traduzione:
## Elenco Stile Tipo
Traduzione:
## Elenco Posizione stile
Traduzione:
### Text Align
Traduzione:
### Colore del testo
Traduzione:
##
Traduzione:
### Colore della decorazione di testo
Traduzione:
## Stile
Traduzione:
### Text Decorazione Spessore
Traduzione:
### Text Underline Offset
Traduzione:
### Text Transform
Traduzione:
### Text Overflow
Traduzione:
### Text Indent
Traduzione:
### Vertical Align
Traduzione:
### Whitespace
Traduzione:
## Word Break
Traduzione:
### Contenuto
Traduzione:
# Indietro
### Background Attachment
Traduzione:
### Clip di sfondo
Traduzione:
### Colore di sfondo
Traduzione:
### Background Origin
Traduzione:
### Posizione di sfondo
Traduzione:
### Indietro Ripeto
Traduzione:
### Dimensione dello sfondo
# CODE_BLOCK_84_
### Immagine di sfondo
Traduzione:
### Gradient Color Stops
Traduzione:
# Borders #
## Border Radius #
Traduzione:
## Border Width #
Traduzione:
### Colore di confine
Traduzione:
### Border Style
Traduzione:
### Divide Width
Traduzione:
### Divide Color
Traduzione:
### Divide Style
Traduzione:
## Outline Width
Traduzione:
### Outline Color
Traduzione:
### Outline Style
Traduzione:
### Outline Offset
Traduzione:
# Anello Larghezza
Traduzione:
### Ring Color
Traduzione:
### Ring Offset Width
Traduzione:
### Ring Offset Color
Traduzione:
## Effetti
### Box Shadow
Traduzione:
### Box Shadow Color
Traduzione:
### Opacity
Traduzione:
### Mix Blend Mode
Traduzione:
### Background Blend Mode
Traduzione:
## Filtri
## Blur #
Traduzione:
###
Traduzione:
# Contrasto #
Traduzione:
# Goccia ombra
#
#
Traduzione:
# Hue Rotate
Traduzione:
## Invert #
Traduzione:
### Saturate
Traduzione:
## Sepia #
___________
## Backdrop Blur
Traduzione:
### Backdrop Brightness
Traduzione:
## Backdrop Contrast
Traduzione:
## Backdrop Grayscale
Traduzione:
### Backdrop Hue Rotate
# CODE_BLOCK_120_
### Backdrop Invert
Traduzione:
### Backdrop Opacity
#
## Backdrop Saturate
__________
## Backdrop Sepia
Traduzione:
# Tavoli
## Border Collapse #
Traduzione:
### Border Spacing
Traduzione:
# Telaio da tavolo
Traduzione:
### Caption Side #
Traduzione:
## Transitions & Animation
### Transition Property
Traduzione:
### Durata della transizione
Traduzione:
### Transition Timing Function
Traduzione:
### Transition Delay
Traduzione:
### Animazione
Traduzione:
## Transforms
## Scale
Traduzione:
### Rotate
Traduzione:
## Traduci
Traduzione:
### Skew #
Traduzione:
### Transform Origin
Traduzione:
## Interattività
### Colore accento
Traduzione:
### Aspetto #
Traduzione:
### Cursor #
Traduzione:
### Caret Color
Traduzione:
### Pointer Events
Traduzione:
### Ridimensiona
Traduzione:
## Scroll Behavior #
Traduzione:
## Scroll Margin
Traduzione:
### Scroll Padding
Traduzione:
### Scroll Snap Align
Traduzione:
## Scroll Snap Stop
Traduzione:
### Scroll Snap Type
__________
### Touch Action
Traduzione:
### User Select
Traduzione:
### Will Change
__________
# SVG #
### Fill
___________
## Stroke #
Traduzione:
## Stroke Width #
Traduzione:
## Accessibilità
### Screen Readers
Traduzione:
### Focus #
Traduzione:
## ARIA Attributi
Traduzione:
## Responsive Design
### Breakpoints
Traduzione:
#### Query Container
Traduzione:
# Modalità oscura
# Impostazione modalità oscura
Traduzione:
# Classi di modalità scura
Traduzione:
# Personalizzazione #
# Estendere il tema
Traduzione:
### Componenti personalizzati
Traduzione:
### Custom Utilities
Traduzione:
## Componenti
### Button Component
Traduzione:
### Scheda componente
Traduzione:
### Modulo Component
Traduzione:
### Navigazione Component
Traduzione:
# Migliori Pratiche
## Performance
- **Purge inused CSS**: Configura PurgeCSS per rimuovere stili inutilizzati nella produzione
- **Utilizza la modalità JIT**: Abilita la compilazione Just-In-Time per le costruzioni più veloci
- **Ottimizzare per la produzione ** Minify CSS e rimuovere i commenti
### Manutenzione
- **Utilizzare i nomi delle classi semantiche**: Combina le classi di utilità in classi di componenti significative
- ** Componenti esterni**: Crea classi di componenti riutilizzabili per modelli comuni
- **Utilizzo personalizzato del documento**: Commenta utilità e componenti personalizzati
### Accessibilità
- Si'. Includere sempre gli stati di messa a fuoco per gli elementi interattivi
- ** Colore contrasto ** Assicurare un contrasto di colore sufficiente per il testo
- **I lettori di scuola ** Utilizzare la classe di sola sr per il contenuto del lettore di schermo
### Responsive Design
- Mamma prima. Progettazione per dispositivi mobili prima, quindi migliorare per schermi più grandi
- No. Metti alla prova il tuo design in tutte le dimensioni del breakpoint
- **Utilizza le query dei container**: Considera le query dei container per il design reattivo basato sui componenti
---
## Sommario
Tailwind CSS è un framework CSS che fornisce classi di utilità di basso livello per costruire disegni personalizzati direttamente nel tuo markup. I vantaggi principali includono:
- **Utilità-First**: Costruisci componenti complessi da un insieme limitato di utilità primitive
- **Responsive**: Ogni classe di utilità può essere applicata condizionatamente a diversi punti di rottura
- **Customizable**: Personalizza il framework per abbinare il tuo sistema di progettazione
- **Performance**: Rimuovere automaticamente il CSS inutilizzato nelle costruzioni di produzione
- **Developer Experience**: Eccellente supporto IntelliSense e strumenti di sviluppo
Con la padronanza delle utility Tailwind CSS e seguendo le migliori pratiche, è possibile costruire interfacce utente belle, reattive ed efficienti.