Tilføjelse af brugerdefinerede utilities via plugin
Skriv et plugin, der tilføjer nye utility-klasser som text-shadow-* eller scrollbar-hide, der ikke findes i standarddistributionen af Tailwind.
Tilføjelse af brugerdefinerede utilities via plugin er en gratis Tailwind CSS Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Tailwind CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Hvornår du skal tilføje en tilpasset hjælpeklasse
Tilføj en tilpasset hjælpeklasse, når du gentagne gange skriver den samme rå CSS i @apply-blokke eller inline-typografi, når Tailwind mangler en hjælpeklasse til en gyldig CSS-egenskab, eller når en kombination af browserspecifikke præfikser har brug for et enkelt klassenavn. Gode tilpassede hjælpeklasser følger Tailwinds princip om ét ansvarsområde: Én hjælpeklasse styrer én CSS-egenskab eller en tæt beslægtet gruppe. Undgå at oprette hjælpeklasser, der angiver mange uvedkommende egenskaber — det hører hjemme i komponenter.
Hjælpeklasse til at skjule rullebjælken
En af de mest efterspurgte tilpassede hjælpeklasser er .scrollbar-hide — den skjuler rullebjælken visuelt, mens elementet stadig kan rulles. Det kræver leverandørspecifikke egenskaber på tværs af browsere: scrollbar-width: none til Firefox og -webkit-scrollbar: display none til Chromium-browsere. Når dette pakkes ind i et plugin, bliver det tilgængeligt som den enkle klasse scrollbar-hide overalt i din markup.
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.scrollbar-hide': {
'-ms-overflow-style': 'none',
'scrollbar-width': 'none',
'&::-webkit-scrollbar': {
display: 'none'
}
},
'.scrollbar-default': {
'-ms-overflow-style': 'auto',
'scrollbar-width': 'auto',
'&::-webkit-scrollbar': {
display: 'block'
}
}
});
})
]
};
// Usage
// <div class='overflow-x-auto scrollbar-hide'>...Hjælpeklasser til tekstskygger
CSS-egenskaben text-shadow bruges ofte, men er ikke inkluderet i Tailwind som standard. Hvis du bygger et plugin til den med integration til temaet, kan brugere anvende den som enhver indbygget hjælpeklasse, og den kan også tilpasses via konfigurationen. Definer standardværdier i temaet, og referér til dem i pluginet, så hjælpeklassen respekterer brugerens tilsidesættelser i tailwind.config.js.
const plugin = require('tailwindcss/plugin');
module.exports = {
theme: {
extend: {
textShadow: {
sm: '0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2))',
DEFAULT: '0 2px 4px var(--tw-shadow-color, rgba(0,0,0,0.3))',
lg: '0 4px 8px var(--tw-shadow-color, rgba(0,0,0,0.4))'
}
}
},
plugins: [
plugin(function({ matchUtilities, theme }) {
matchUtilities(
{ 'text-shadow': (value) => ({ textShadow: value }) },
{ values: theme('textShadow') }
);
})
]
};
// Usage: text-shadow-sm, text-shadow, text-shadow-lg
// Or arbitrary: text-shadow-[0_4px_6px_rgba(0,0,0,0.5)]Hjælpeklasser til skriveretning
CSS' logiske egenskaber til skriveretning (margin-inline-start, padding-inline-end, inset-inline-start) gør det muligt at understøtte højre-til-venstre-layout (RTL) uden duplikeret CSS. Tailwind v3 tilføjede nogle logiske egenskaber, men du kan skrive et plugin, der udfylder eventuelle resterende huller med en konsekvent navngivningskonvention, som følger Tailwinds stil.
plugin(function({ addUtilities, theme }) {
const spacing = theme('spacing');
const utilities = {};
Object.entries(spacing).forEach(([key, value]) => {
// Logical margin utilities (RTL-aware)
utilities['.ms-' + key] = { 'margin-inline-start': value };
utilities['.me-' + key] = { 'margin-inline-end': value };
utilities['.ps-' + key] = { 'padding-inline-start': value };
utilities['.pe-' + key] = { 'padding-inline-end': value };
// Logical inset
utilities['.start-' + key] = { 'inset-inline-start': value };
utilities['.end-' + key] = { 'inset-inline-end': value };
});
addUtilities(utilities);
})Hjælpeklasse til gradienttekst
Gradienttekst kræver en kombination af tre CSS-egenskaber: background-clip: text, -webkit-background-clip: text og color: transparent. Da de faktiske gradientfarver kommer fra hjælpeklasserne bg-gradient-to-* og from-*/to-*, behøver pluginet kun at levere grundlaget for beskæringen. Dette er et klassisk eksempel på en hjælpeklasse med flere egenskaber, som med fordel kan samles under ét mindeværdigt klassenavn.
plugin(function({ addUtilities }) {
addUtilities({
'.text-gradient': {
'-webkit-background-clip': 'text',
'background-clip': 'text',
'-webkit-text-fill-color': 'transparent',
'color': 'transparent'
}
});
})
// Usage: combine with standard bg-gradient utilities
<h1 class='
text-gradient
bg-gradient-to-r
from-purple-500
to-blue-500
text-4xl font-bold
'>
Beautiful gradient text
</h1>Hjælpeklasse til automatisk udfyldning af gitter
CSS Grids gentagelsesmønstre auto-fill og auto-fit til responsive gitre er almindelige, men kræver omstændelig syntaks. Et plugin, der genererer parametriserbare gitter-hjælpeklasser til de mest almindelige minimumsbredder for kolonner, gør responsive gitre langt enklere at skrive. Brug matchUtilities, så brugere kan angive vilkårlige minimumsbredder for kolonner.
plugin(function({ matchUtilities }) {
matchUtilities(
{
'grid-fill': (value) => ({
gridTemplateColumns: 'repeat(auto-fill, minmax(' + value + ', 1fr))'
}),
'grid-fit': (value) => ({
gridTemplateColumns: 'repeat(auto-fit, minmax(' + value + ', 1fr))'
})
},
{ values: { sm: '10rem', md: '15rem', lg: '20rem', xl: '25rem' } }
);
})
// Usage:
// <div class='grid grid-fill-md gap-4'>
// Items auto-arrange into columns of min 15rem
// </div>Hjælpeklasser til CSS Grid-områder
Navngivne gitterområder via grid-template-areas kræver omstændelig CSS, som er svær at udtrykke i Tailwinds hjælpeklass model. Et plugin kan tilføje hjælpeklasser til almindelige layouts med navngivne områder — f.eks. et klassisk sidelayout med områder til sidehoved, sidepanel, hovedindhold og sidefod — som enkeltstående hjælpeklasser. De fungerer godt sammen med col-span-* og row-span-* til mere komplekse layouts.
plugin(function({ addUtilities }) {
addUtilities({
'.grid-area-page': {
gridTemplateAreas:
'"header header"' +
'"sidebar main"' +
'"footer footer"',
gridTemplateColumns: '250px 1fr',
gridTemplateRows: 'auto 1fr auto'
},
'.area-header': { gridArea: 'header' },
'.area-sidebar': { gridArea: 'sidebar' },
'.area-main': { gridArea: 'main' },
'.area-footer': { gridArea: 'footer' }
});
})
// Usage:
// <div class='grid grid-area-page min-h-screen'>
// <header class='area-header'>...</header>
// <aside class='area-sidebar'>...</aside>
// <main class='area-main'>...</main>
// <footer class='area-footer'>...</footer>
// </div>Animationshjælpeklasser ud over de indbyggede
Tailwind indeholder animate-spin, animate-pulse, animate-bounce og animate-ping. Til mere avancerede animationer — f.eks. en vrikken, et hjerteslag eller en svæveeffekt — kan du tilføje tilpassede keyframes til temaet og referere til dem i et plugin. Pluginet sikrer, at animationsklassernes navne følger Tailwinds animate-*-konvention, så systemet forbliver sammenhængende.
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' }
},
heartbeat: {
'0%, 100%': { transform: 'scale(1)' },
'14%': { transform: 'scale(1.3)' },
'28%': { transform: 'scale(1)' },
'42%': { transform: 'scale(1.3)' },
'70%': { transform: 'scale(1)' }
}
},
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
heartbeat: 'heartbeat 1.5s ease-in-out infinite'
}
}
}
};
// Usage: class='animate-wiggle' or class='animate-heartbeat'Test af dine tilpassede hjælpeklasser
Kontrollér, at dine plugin-hjælpeklasser vises i den genererede CSS, ved at oprette en HTML-testfil, der bruger klassenavnene, og køre Tailwind CLI. JIT-motoren skal kunne finde klassen i en fil, der matcher dine content-globs. Test også, at responsive varianter og tilstandsvarianter fungerer, hvis det er meningen — nogle hjælpeklasser til pseudo-elementer, f.eks. ::-webkit-scrollbar, understøtter ikke responsive præfikser på en meningsfuld måde.
<!-- test.html -->
<div class='scrollbar-hide overflow-y-auto h-48'>
<p class='text-shadow-lg text-2xl font-bold text-gray-900'>Test</p>
<div class='grid grid-fill-md gap-4'>
<div class='bg-gray-100 p-4 rounded'>Card 1</div>
<div class='bg-gray-100 p-4 rounded'>Card 2</div>
</div>
</div>
<!-- Run: npx tailwindcss -i src/input.css -o test-output.css --content test.html -->
<!-- Inspect test-output.css for your custom utility classes -->Dokumentation af tilpassede hjælpeklasser
Dokumentér tilpassede hjælpeklasser for dit team, så alle ved, hvad der findes, og hvordan det skal bruges. Opret en PLUGINS.md-fil eller en Storybook-side, der viser hver tilpasset hjælpeklasse med dens klassenavne, accepterede værdier og brugseksempler. Uden dokumentation skriver teammedlemmer ofte den samme CSS to gange — én gang som en hjælpeklasse og igen som inline-typografi — fordi de ikke vidste, at pluginet fandtes.
/*
Custom Utilities Documentation
================================
.scrollbar-hide
Hides the scrollbar while preserving scroll functionality.
Use with: overflow-y-auto, overflow-x-auto
Example: <div class='overflow-y-auto h-64 scrollbar-hide'>
.text-shadow-{size}
Adds a text shadow. Sizes: sm, DEFAULT, lg.
Example: <h1 class='text-shadow-lg text-3xl font-bold'>
Arbitrary: <h1 class='text-shadow-[0_4px_8px_rgba(0,0,0,0.5)]'>
.text-gradient
Enables gradient text via background-clip: text.
Must combine with bg-gradient-to-* and from-*/to-* utilities.
Example: <span class='text-gradient bg-gradient-to-r from-purple-500 to-pink-500'>
.grid-fill-{size}
Auto-fill grid with minimum column width. Sizes: sm, md, lg, xl.
Example: <div class='grid grid-fill-md gap-4'>
*/Ydeevnepåvirkning fra tilpassede hjælpeklasser
Tilpassede hjælpeklasser øger størrelsen på din genererede CSS. Hvis en hjælpeklasse genererer mange permutationer (f.eks. afstandshjælpeklasser på tværs af mere end 30 skalatrin), kan outputtet vokse betydeligt. Vær selektiv med, hvilke hjælpeklasser du genererer programmatisk. Brug matchUtilities med et lille sæt temaværdier, og benyt vilkårlige værdier til enkeltstående tilfælde i stedet for at forhåndsgenerere alle mulige kombinationer. Det holder din CSS-pakke kompakt og bevarer samtidig fleksibiliteten.
// Avoid: generates 30+ utilities upfront
plugin(function({ addUtilities, theme }) {
const spacing = theme('spacing'); // 30+ entries
const utils = {};
Object.entries(spacing).forEach(([k, v]) => {
utils['.clip-' + k] = { clipPath: 'inset(' + v + ')' };
});
addUtilities(utils); // large CSS output
});
// Better: use matchUtilities with limited defaults
plugin(function({ matchUtilities, theme }) {
matchUtilities(
{ 'clip': (v) => ({ clipPath: 'inset(' + v + ')' }) },
{ values: { none: '0', sm: '0.5rem', md: '1rem' } }
// Users can still do clip-[2rem] for custom values
);
});Hurtigt tjek
Test din forståelse af begreberne i Tailwind CSS Mastery fra denne lektion.
Opsummering af lektionen
I denne lektion lærte du: addUtilities tilføjer statiske tilpassede hjælpeklasser, matchUtilities tilføjer hjælpeklasser med understøttelse af vilkårlige værdier, og tilpassede hjælpeklasser bør dokumenteres og afgrænses til reelle, gentagne behov. Nu lærer vi, hvordan du tilføjer tilpassede tilstandsvarianter via plugins for at målrette tilpassede selektorer og dataattributter.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Tilføjelse af brugerdefinerede utilities via plugin” gratis?
Ja — hele teksten til “Tilføjelse af brugerdefinerede utilities via plugin” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Tailwind CSS Academy-kurset, skal du opgradere til CoddyKit PRO. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Tilføjelse af brugerdefinerede utilities via plugin”?
Skriv et plugin, der tilføjer nye utility-klasser som text-shadow-* eller scrollbar-hide, der ikke findes i standarddistributionen af Tailwind. Du øver dig i Tailwind CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Tailwind CSS Academy?
Der kræves ingen tidligere erfaring. Tailwind CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Tilføjelse af brugerdefinerede utilities via plugin”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Tailwind CSS Academy-lektion?
Ja. Alle Tailwind CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Tailwind-plugin-API'en
- Tilføjelse af brugerdefinerede utilities via plugin
- Tilføjelse af brugerdefinerede varianter via plugin
- Udgivelse og genbrug af plugins