Questo articolo spiegherà il metodo per utilizzare le utilità statiche in Tailwind CSS.
Come utilizzare le utilità statiche in Tailwind?
Per utilizzare le utilità statiche in Tailwind, aggiungi ' addUtility() ” nel file “tailwind.config.js” e configurare le utilità statiche desiderate. Quindi, utilizzare le utilità statiche nel programma HTML e assicurarsi che le utilità statiche funzionino correttamente durante la visualizzazione della pagina Web HTML.
Esploriamo i seguenti passaggi:
Passaggio 1: configurare le utilità statiche nel file 'tailwind.config.js'.
Apri il ' tailwind.config.js ” e aggiungi il “ plugin ' sezione. Quindi, usa il ' addUtility() ” per configurare le utilità statiche desiderate. Ad esempio, abbiamo configurato le seguenti utilità statiche:
const plugin = require('tailwindcss/plugin')
modulo.esporta = {
contenuto: ['./index.html'],
plugin: [
plugin(funzione({addUtilities}) {
addUtility({
'.content-auto': {
'visibilità del contenuto': 'auto',
},
'.contenuto nascosto': {
'visibilità del contenuto': 'nascosto',
},
'.bg-corallo': {
sfondo: 'corallo'
},
'.inclinazione-5 gradi': {
trasformazione: 'skewY(-5deg)',
},
})
})
]
};
Qui:
- IL ' addUtility() La funzione ” registra le utilità statiche personalizzate fornendo un oggetto contenente le classi di utilità e gli stili corrispondenti.
- IL ' .content-auto La classe di utilità imposta la proprietà content-visibility su auto.
- IL ' .contenuto nascosto ” classe di utilità imposta la proprietà content-visibility su hidden.
- IL ' .bg-corallo La classe di utilità imposta il colore del corallo sullo sfondo.
- IL ' .skew-5deg ” classe di utilità imposta la proprietà transform su skewY(-5deg).
Passaggio 2: utilizzare le utilità statiche nel programma HTML
Ora, usa le utilità statiche desiderate nel programma HTML:
< div classe = 'h-schermo bg-corallo' >
< P classe = 'contenuto automatico' >Ciao< / P >
< P classe = 'contenuto nascosto' >Benvenuti qui< / P >
< P classe = 'inclinazione-5 gradi' >Trasforma testo< / P >
< / div >
< / corpo >
Passaggio 3: verificare l'output
Infine, esegui il programma HTML per assicurarti che le utilità statiche funzionino correttamente:
L'output precedente indica che le utilità statiche funzionano correttamente in base a come sono state definite.
Conclusione
Per utilizzare le utilità statiche in Tailwind, è necessario utilizzare il ' addUtility() ” nel file “tailwind.config.js” e configurare le utilità statiche desiderate. La funzione “addUtilities()” e aggiunge classi di utilità che possono essere applicate direttamente nel programma HTML. Questo articolo ha spiegato il metodo per utilizzare le utilità statiche in Tailwind CSS.