In Tailwind, le proporzioni sono la proporzione tra la larghezza e l'altezza di un elemento, come un video o un'immagine. Tailwind CSS ha introdotto il supporto nativo per le utilità delle proporzioni, che utilizzano la proprietà CSS delle proporzioni per impostare le proporzioni desiderate per un elemento. Tuttavia, questa proprietà non è supportata nei browser meno recenti. Pertanto, gli utenti possono utilizzare il plug-in delle proporzioni per supportare questi browser. Questo plugin introduce due classi, ad esempio ' aspetto-w-{n} ' E ' aspetto-h-{n} ”, che possono essere combinati per conferire a un elemento proporzioni fisse.
Questo articolo spiegherà il metodo per impostare il plug-in delle proporzioni in Tailwind.
Come impostare il plug-in delle proporzioni in Tailwind CSS?
Per impostare il plug-in delle proporzioni in Tailwind, osserva i passaggi forniti di seguito:
- Installa il plug-in delle proporzioni nel progetto
- Aggiungi il plug-in delle proporzioni nel file 'tailwind.config.js' e disabilita il ' aspetto 'plug-in principale
- Utilizza le classi del plugin per le proporzioni nel programma HTML
- Verificare l'output visualizzando la pagina Web HTML
Passaggio 1: installa il plug-in proporzioni nel progetto Tailwind
Innanzitutto, apri il terminale ed esegui il comando indicato di seguito per installare il plug-in delle proporzioni nel progetto:
asl e @ vento in coda / proporzioni
Passaggio 2: configura il plug-in delle proporzioni nel file di configurazione Tailwind
Quindi, apri il file 'tailwind.config.js', aggiungi il plug-in delle proporzioni e disabilita il ' aspetto 'plug-in principale per evitare eventuali conflitti:
modulo.esporta = {contenuto: [ './indice.html' ] ,
Plugin principali: {
proporzioni: falso ,
} ,
plugin: [
richiedere ( '@tailwindcss/proporzioni' ) ,
] ,
} ;
Passaggio 3: utilizzare il plug-in proporzioni nel programma HTML
Ora crea un programma HTML e utilizza il plug-in delle proporzioni in esso contenuto. Ad esempio, abbiamo utilizzato ' aspetto-w-16 ' E ' aspetto-h-9 ' classi nel nostro programma per mantenere le proporzioni 16:9:
< corpo >< div classe = 'aspetto-w-16 aspetto-h-9' >
< iFrame src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
frameborder = '0' permettere = 'accelerometro; riproduzione automatica;
scrittura negli appunti; supporti crittografati; giroscopio;
immagine nell'immagine' consentire schermo intero > iFrame >
div >
corpo >
Qui:
- IL ' L'elemento ' utilizza due classi di plug-in con proporzioni, ovvero ' aspetto-w-16 ' E ' aspetto-h-9 ”. Queste classi vengono utilizzate per creare un contenitore con proporzioni fisse di 16:9.
- IL '