Tailwind CSS - Creazione rapida di siti web moderni
>
Tailwind CSS è un primo framework CSS dotato di classi come flex, pt-4, text-center e rotazione-90 che può essere composto per costruire qualsiasi disegno, direttamente nel vostro markup.
< >
< >
Traduzione:
Traduzione: Copia tutti i comandi
Traduzione: Generare PDF
< >
< >
## Tabella dei contenuti
- [Installazione]
- [Configurazione](#configuration)
- [Core Concepts](#core-concepts)
- [Layout]
- [Flexbox & Grid](#flexbox--grid]
- [Spacing]
- [Sizing]
- [Tipografia]
- [Backgrounds](_LINK_8___)
- [Bordini](_LINK_9__)
- [Effects](_LINK_10___)
- [Filtri]
- [Tavole](_LINK_12__)
- [Transitions & Animation](#transitions--animation)
- [Transforms](_LINK_14__)
- [Interattività]
- [SVG](_LINK_16__]
- [Accessibilità](#accessibility]
- [Responsive Design](#responsive-design)
- [Modalità Dark](_LINK_19___)
- [Customization](#customization_)
- [Componenti](_LINK_21___)
- [Le migliori pratiche](_LINK_22__)
## Installazione
### CDN (Quick Start)
Traduzione:
### Installazione tramite npm
Traduzione:
### Set di viti
Traduzione:
Traduzione:
Traduzione:
### Prossimo.
Traduzione:
Traduzione:
Traduzione:
## Configurazione
### Configurazione di base
Traduzione:
### Configurazione avanzata
Traduzione:
## Concetti core
### Utility-Primi Fondamenti
Traduzione:
### Hover, Focus e altri Stati
Traduzione:
### Moduli rispondenti
#
## Telaio
### contenitore
Traduzione:
### Smaltimento della scatola
Traduzione:
### Visualizza
Traduzione:
### Floats
Traduzione:
### Libero
Traduzione:
### Dosaggio di oggetti
Traduzione:
### Posizione oggetti
Traduzione:
### Overflow
Traduzione:
### Posizione
Traduzione:
### Top / destra / inferiore / sinistra
Traduzione:
### Visibilità
Traduzione:
### Z-Index
Traduzione:
## Flexbox & Griglia
### Direzione flessibile
Traduzione:
### Wrap
Traduzione:
### Flex
Traduzione:
### Crescita flessibile
Traduzione:
### Restringimento flessibile
Traduzione:
### Ordine
Traduzione:
### Colonne modello Grid
Traduzione:
### Avvio / Fine della colonna Griglia
Traduzione:
### righe modello Grid
Traduzione:
### Griglia Avvio riga / Fine
#
### Gap
Traduzione:
### Giustificare il contenuto
Traduzione:
### giustificare gli oggetti
Traduzione:
### Giustificare il Sé
Traduzione:
### Allineare i contenuti
Traduzione:
### Allineare gli elementi
Traduzione:
### Allineare il Sé
Traduzione:
### Luogo Contenuto
Traduzione:
### Luogo oggetti
Traduzione:
### Luogo di auto
Traduzione:
## Spaziatura
### Imbottitura
Traduzione:
### Margine
Traduzione:
### spazio tra
Traduzione:
## Personalizzazione
### Larghezza
Traduzione:
### Min-Width
Traduzione:
### Max-Width
Traduzione:
### Altezza
Traduzione:
### Min-Height
Traduzione:
### Max-Height
Traduzione:
## Tipografia
### Font Family
__________
### Dimensione del carattere
Traduzione:
### Font Smoothing
Traduzione:
### Stile del carattere
Traduzione:
### Font Peso
Traduzione:
### Font Variante Numerico
Traduzione:
### Letter Spacing
Traduzione:
### Altezza della linea
Traduzione:
### Elenco Stile Tipo
Traduzione:
### Elenco Stile Posizione
Traduzione:
### Allineamento del testo
Traduzione:
### Colore del testo
Traduzione:
### Decorazione del testo
Traduzione:
### Colore della decorazione di testo
Traduzione:
### Stile di decorazione del testo
Traduzione:
### Spessore della decorazione del testo
Traduzione:
### Testo In linea
Traduzione:
### Trasformazione del testo
Traduzione:
### Overflow del testo
Traduzione:
### Indennità di testo
Traduzione:
### Allineamento verticale
Traduzione:
### Spazio bianco
Traduzione:
### Parola di parola
Traduzione:
### Contenuto
Traduzione:
## Sfondi
### Attaccamento dello sfondo
Traduzione:
### Clip di sfondo
Traduzione:
### Colore dello sfondo
Traduzione:
### Origine dello sfondo
Traduzione:
### Posizione dello sfondo
Traduzione:
### Ripeto dello sfondo
Traduzione:
### Dimensione dello sfondo
# CODE_BLOCK_84_
### Immagine di sfondo
Traduzione:
### Taglie di colore sfumate
Traduzione:
## Borse
### Radius di confine
Traduzione:
### Larghezza di confine
Traduzione:
### Colore di confine
Traduzione:
### Stile di confine
Traduzione:
### Dividere la larghezza
Traduzione:
### Dividere il colore
Traduzione:
### Dividere lo stile
Traduzione:
### Larghezza esterna
Traduzione:
### Colore di Outline
Traduzione:
### Stile Outline
Traduzione:
### Outline Offset
Traduzione:
### Anello Larghezza
Traduzione:
### Colore dell'anello
Traduzione:
### Larghezza dell'anello
Traduzione:
### Colore dell'anello
Traduzione:
## Effetti
### Box Ombra
Traduzione:
### Colore ombra scatola
Traduzione:
### Possibilità
Traduzione:
### Modalità miscela
Traduzione:
### Modalità di miscela di sfondo
Traduzione:
## Filtri
### Blu
Traduzione:
### Luminosità
Traduzione:
### Contrasto
Traduzione:
### Goccia ombra
#
### Scala grigia
Traduzione:
### Hue Rotate
Traduzione:
### Invertire
Traduzione:
### Saturate
Traduzione:
### Seppia
___________
### Blu a goccia
Traduzione:
### Luminosità di backdrop
Traduzione:
### Contrasto a goccia
Traduzione:
### Indietro Scala di grigi
Traduzione:
### Goccia posteriore ruota
# CODE_BLOCK_120_
### Invertimento a goccia
Traduzione:
### Opacità di backdrop
#
### Saturate a goccia
__________
### Seppia della schiena
Traduzione:
## Tavole
### Colpo di confine
Traduzione:
### Border Spacing
Traduzione:
### Telaio da tavolo
Traduzione:
### Tappo laterale
Traduzione:
## Transizioni & Animazione
### Proprietà di transizione
Traduzione:
### Durata della transizione
Traduzione:
### Funzione di sincronizzazione della transizione
Traduzione:
### Trasmissione
Traduzione:
### Animazione
Traduzione:
## Trasformazioni
### Scala
Traduzione:
### Ruotare
Traduzione:
### Traduttore
Traduzione:
### Skew
Traduzione:
### Trasformare l'origine
Traduzione:
## Interattività
### Colore Accent
Traduzione:
### Aspetto
Traduzione:
### Cursore
Traduzione:
### Colore della cura
Traduzione:
### Eventi Pointer
Traduzione:
### Ridimensionare
Traduzione:
### Scroll Behavior
Traduzione:
### Margine di scorrimento
Traduzione:
### Imbottitura del rotolo
Traduzione:
### Scroll Snap Align
Traduzione:
### Scroll Snap Stop
Traduzione:
### Tipo di scatto
__________
### Toccare l'azione
Traduzione:
### Seleziona utente
Traduzione:
### Cambiamento
__________
## SVG
### Riempi
___________
### Stroke
Traduzione:
### Stroke Larghezza
Traduzione:
## Accessibilità
### Lettori di schermo
Traduzione:
### Focus
Traduzione:
### ARIA Attributi
Traduzione:
## Design responsabile
### Punti di rottura
Traduzione:
### Quercie del contenitore
Traduzione:
## Modalità oscura
### Impostazione modalità oscura
Traduzione:
### Classi di modalità scura
Traduzione:
## Personalizzazione
### Estendere il tema
Traduzione:
### Componenti personalizzati
Traduzione:
### Utilità personalizzate
Traduzione:
## Componenti
### Componente del pulsante
Traduzione:
### Componente della carta
Traduzione:
### Componente del modulo
Traduzione:
### Componente di navigazione
Traduzione:
## Migliori Pratiche
### Prestazioni
- **Purge unused 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 di estrazione ** Creare classi di componenti riutilizzabili per modelli comuni
- **Utilizzo personalizzato del documento**: Commenta utilità e componenti personalizzati
### Accessibilità
- **Focus dichiara ** 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
### Design responsabile
- #Mobile first** # Progettazione per dispositivi mobili prima, quindi migliorare per schermi più grandi
- ♪Test breakpoints ♪ Metti alla prova il tuo design in tutte le dimensioni del breakpoint
- ** Utilizzare le query dei container**: Considera le domande dei container per il design reattivo basato sui componenti
---
## Sintesi
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.
Traduzione:
copia funzioneToClipboard() {}
const commands = document.querySelectorAll('code');
tutti i Comandi = '';
comandi. per ogni(cmd => AllCommands += cmd.textContent + '\n');
navigatore.clipboard.writeText(tutti iComandi);
alert('Tutti i comandi copiati a clipboard!');
#
funzione generaPDF() {
finestra.print();
#
< >