Denne artikkelen vil forklare metoden for å bruke de statiske verktøyene i Tailwind CSS.
Hvordan bruke statiske verktøy i medvind?
For å bruke de statiske verktøyene i Tailwind, legg til ' addUtilities() '-funksjonen i 'tailwind.config.js'-filen og konfigurer de ønskede statiske verktøyene. Bruk deretter statiske verktøy i HTML-programmet og sørg for at de statiske verktøyene fungerer som de skal når du ser på HTML-nettsiden.
La oss utforske følgende trinn:
Trinn 1: Konfigurer Static Utilities i 'tailwind.config.js'-filen
Åpne ' tailwind.config.js '-filen og legg til ' plugins ' seksjon. Deretter bruker du ' addUtilities() ”-funksjon for å konfigurere de ønskede statiske verktøyene. For eksempel har vi konfigurert følgende statiske verktøy:
const plugin = require('tailwindcss/plugin')
module.exports = {
innhold: ['./index.html'],
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.content-auto': {
'content-visibility': 'auto',
},
'.content-hidden': {
'content-visibility': 'skjult',
},
'.bg-coral': {
bakgrunn: 'korall'
},
'.skew-5deg': {
transform: 'skewY(-5deg)',
},
})
})
]
};
Her:
- « addUtilities() ”-funksjonen registrerer de egendefinerte statiske verktøyene ved å gi et objekt som inneholder verktøyklasser og deres tilsvarende stiler.
- « .content-auto ” utility class setter egenskapen for innholdssynlighet til auto.
- « .content-hidden ” utility class setter egenskapen for innholdssynlighet til skjult.
- « .bg-korall ” utility class setter korallfargen til bakgrunnen.
- « .skjev-5 grader ” utility class setter transform-egenskapen til skewY(-5deg).
Trinn 2: Bruk Static Utilities i HTML-programmet
Bruk nå de ønskede statiske verktøyene i HTML-programmet:
< div klasse = 'h-skjerm bg-korall' >
< s klasse = 'content-auto' >Hei< / s >
< s klasse = 'innhold skjult' >Velkommen hit< / s >
< s klasse = 'skjev-5 grader' >Endre tekst< / s >
< / div >
< / kropp >
Trinn 3: Bekreft utdata
Til slutt, kjør HTML-programmet for å sikre at de statiske verktøyene fungerer som de skal:
Ovennevnte utdata indikerer at de statiske verktøyene fungerer som de ble definert i henhold til.
Konklusjon
For å bruke de statiske verktøyene i Tailwind, er det nødvendig å bruke ' addUtilities() '-funksjonen i 'tailwind.config.js'-filen og konfigurer de ønskede statiske verktøyene. 'addUtilities()'-funksjonen og legg til verktøyklasser som kan brukes direkte i HTML-programmet. Denne artikkelen har forklart metoden for å bruke statiske verktøy i Tailwind CSS.