Den här artikeln kommer att förklara metoden för att använda de statiska verktygen i Tailwind CSS.
Hur man använder Static Utilities i Tailwind?
För att använda de statiska verktygen i Tailwind, lägg till ' addUtilities() ”-funktionen i filen ”tailwind.config.js” och konfigurera önskade statiska verktyg. Använd sedan statiska verktyg i HTML-programmet och se till att de statiska verktygen fungerar korrekt när du tittar på HTML-webbsidan.
Låt oss utforska följande steg:
Steg 1: Konfigurera Static Utilities i filen 'tailwind.config.js'.
Öppna ' tailwind.config.js '-filen och lägg till ' plugins ' sektion. Använd sedan ' addUtilities() ”-funktion för att konfigurera önskade statiska verktyg. Till exempel har vi konfigurerat följande statiska verktyg:
const plugin = require('tailwindcss/plugin')
module.exports = {
innehåll: ['./index.html'],
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.content-auto': {
'content-visibility': 'auto',
},
'.content-hidden': {
'content-visibility': 'hidden',
},
'.bg-coral': {
bakgrund: 'korall'
},
'.skew-5deg': {
transform: 'skewY(-5deg)',
},
})
})
]
};
Här:
- den ' addUtilities() ”-funktionen registrerar de anpassade statiska verktygen genom att tillhandahålla ett objekt som innehåller verktygsklasser och deras motsvarande stilar.
- den ' .content-auto ” utility class ställer in content-visibility-egenskapen till auto.
- den ' .content-hidden ” utility class ställer in content-visibility-egenskapen till dold.
- den ' .bg-korall ” utility class ställer in korallfärgen till bakgrunden.
- den ' .skew-5deg ” utility class ställer in transform-egenskapen till skewY(-5deg).
Steg 2: Använd Static Utilities i HTML-programmet
Använd nu de önskade statiska verktygen i HTML-programmet:
< div klass = 'h-skärm bg-korall' >
< sid klass = 'content-auto' >Hej< / sid >
< sid klass = 'innehåll dolt' >Välkommen hit< / sid >
< sid klass = 'skew-5deg' >Omvandla text< / sid >
< / div >
< / kropp >
Steg 3: Verifiera utdata
Slutligen, kör HTML-programmet för att säkerställa att de statiska verktygen fungerar korrekt:
Ovanstående utdata indikerar att de statiska verktygen fungerar korrekt enligt vilket de definierades.
Slutsats
För att använda de statiska verktygen i Tailwind, måste du använda ' addUtilities() ”-funktionen i filen ”tailwind.config.js” och konfigurera önskade statiska verktyg. Funktionen 'addUtilities()' och lägg till verktygsklasser som kan appliceras direkt i HTML-programmet. Den här artikeln har förklarat metoden för att använda statiska verktyg i Tailwind CSS.