In dit artikel wordt de methode uitgelegd om de statische hulpprogramma's in Tailwind CSS te gebruiken.
Hoe statische hulpprogramma's gebruiken in Tailwind?
Om de statische hulpprogramma's in Tailwind te gebruiken, voegt u de ' addHulpprogramma's() '-functie in het bestand 'tailwind.config.js' en configureer de gewenste statische hulpprogramma's. Gebruik vervolgens statische hulpprogramma's in het HTML-programma en zorg ervoor dat de statische hulpprogramma's goed werken bij het bekijken van de HTML-webpagina.
Laten we de volgende stappen onderzoeken:
Stap 1: Statische hulpprogramma's configureren in het bestand 'tailwind.config.js'.
Open de ' staartwind.config.js ' bestand en voeg de ' plug-ins ' sectie. Gebruik dan de ' addHulpprogramma's() '-functie om de gewenste statische hulpprogramma's te configureren. We hebben bijvoorbeeld de volgende statische hulpprogramma's geconfigureerd:
const plugin = vereisen('tailwindcss/plugin')
module.export = {
inhoud: ['./index.html'],
plug-ins: [
plug-in(functie({ addUtilities }) {
addHulpprogramma's({
'.content-auto': {
'inhoud-zichtbaarheid': 'auto',
},
'.content-hidden': {
'content-zichtbaarheid': 'verborgen',
},
'.bg-koraal': {
achtergrond: 'koraal'
},
'.skew-5deg': {
transformeren: 'skewY(-5deg)',
},
})
})
]
};
Hier:
- De ' addHulpprogramma's() ” functie registreert de aangepaste statische hulpprogramma's door een object te leveren dat hulpprogrammaklassen en hun bijbehorende stijlen bevat.
- De ' .content-auto ” utility class stelt de eigenschap content-visibility in op auto.
- De ' .content-verborgen ” utility class stelt de eigenschap content-visibility in op hidden.
- De ' .bg-koraal ”utility class stelt de koraalkleur in op de achtergrond.
- De ' .skew-5 graden ”utility class stelt de eigenschap transform in op skewY(-5deg).
Stap 2: Gebruik de statische hulpprogramma's in het HTML-programma
Gebruik nu de gewenste statische hulpprogramma's in het HTML-programma:
< div klas = 'h-scherm bg-koraal' >
< P klas = 'content-auto' >Hallo< / P >
< P klas = 'inhoud verborgen' >Welkom hier< / P >
< P klas = 'scheef-5 graden' >Tekst transformeren< / P >
< / div >
< / lichaam >
Stap 3: uitvoer controleren
Voer ten slotte het HTML-programma uit om ervoor te zorgen dat de statische hulpprogramma's correct werken:
De bovenstaande uitvoer geeft aan dat de statische hulpprogramma's correct werken volgens de manier waarop ze zijn gedefinieerd.
Conclusie
Om de statische hulpprogramma's in Tailwind te gebruiken, is het vereist om de ' addHulpprogramma's() '-functie in het bestand 'tailwind.config.js' en configureer de gewenste statische hulpprogramma's. De functie 'addUtilities()' en voeg hulpprogrammaklassen toe die rechtstreeks in het HTML-programma kunnen worden toegepast. Dit artikel heeft de methode uitgelegd om statische hulpprogramma's te gebruiken in Tailwind CSS.