Aangepaste utilities toevoegen via een plugin
Schrijf een plugin die nieuwe utility-classes toevoegt, zoals text-shadow-* of scrollbar-hide, die niet in de standaarddistributie van Tailwind zitten.
Aangepaste utilities toevoegen via een plugin is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wanneer voeg je een aangepast hulpprogramma toe
Voeg een aangepast hulpprogramma toe wanneer je merkt dat je steeds dezelfde onbewerkte CSS schrijft in @apply-blokken of inline stijlen, wanneer Tailwind geen hulpprogramma heeft voor een geldige CSS-eigenschap, of wanneer een browsergebonden combinatie van voorvoegsels een duidelijke klassenaam nodig heeft. Goede aangepaste hulpprogramma's volgen het principe van één verantwoordelijkheid van Tailwind: één hulpprogramma beheert één CSS-eigenschap of een nauw verwante groep eigenschappen. Maak geen hulpprogramma's die veel niet-gerelateerde eigenschappen instellen — die horen thuis in componenten.
Hulpprogramma om schuifbalken te verbergen
Een van de meest gevraagde aangepaste hulpprogramma's is .scrollbar-hide — hiermee verberg je de schuifbalk visueel, terwijl het element wel scrollbaar blijft. Hiervoor zijn browserspecifieke eigenschappen nodig: scrollbar-width: none voor Firefox en -webkit-scrollbar: display none voor Chromium-browsers. Door dit in een plugin te verpakken, is het overal in je markup beschikbaar als een eenvoudige klasse scrollbar-hide.
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'>...Hulpprogramma's voor tekstschaduw
text-shadow is een veelgebruikte CSS-eigenschap die Tailwind standaard niet bevat. Door hiervoor een plugin met thema-integratie te bouwen, kunnen gebruikers deze eigenschap gebruiken zoals elk ingebouwd hulpprogramma en deze ook via de configuratie aanpassen. Definieer standaardwaarden in het thema en verwijs ernaar in de plugin, zodat het hulpprogramma gebruikersaanpassingen in tailwind.config.js respecteert.
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)]Hulpprogramma's voor schrijfrichting
Logische CSS-eigenschappen voor schrijfrichting (margin-inline-start, padding-inline-end, inset-inline-start) maken ondersteuning voor rechts-naar-linksindelingen (RTL) mogelijk zonder dubbele CSS. Tailwind v3 heeft enkele logische eigenschappen toegevoegd, maar je kunt een plugin schrijven om eventuele resterende hiaten op te vullen met een consistente naamgevingsconventie die aansluit bij de stijl van Tailwind.
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);
})Hulpprogramma voor verlooptekst
Voor verlooptekst zijn drie CSS-eigenschappen nodig: background-clip: text, -webkit-background-clip: text en color: transparent. Omdat de daadwerkelijke verloopkleuren afkomstig zijn van de hulpprogramma's bg-gradient-to-* en from-*/to-*, hoeft de plugin alleen de basis voor het bijsnijden te leveren. Dit is een klassiek hulpprogramma met meerdere eigenschappen dat baat heeft bij één herkenbare klassenaam.
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>Hulpprogramma voor automatisch vullen van rasters
De herhalingspatronen auto-fill en auto-fit van CSS Grid voor responsieve rasters zijn gebruikelijk, maar vereisen omslachtige syntaxis. Een plugin die parametriseerbare rasterhulpprogramma's genereert voor de meest voorkomende minimale kolombreedtes maakt het schrijven van responsieve rasters veel eenvoudiger. Gebruik matchUtilities, zodat gebruikers willekeurige minimale kolombreedtes kunnen opgeven.
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>Hulpprogramma's voor CSS-rastergebieden
Benoemde rastergebieden via grid-template-areas vereisen omslachtige CSS die moeilijk uit te drukken is in het hulpprogrammamodel van Tailwind. Een plugin kan hulpprogramma's toevoegen voor veelgebruikte indelingen met benoemde gebieden — zoals een klassieke paginalay-out met gebieden voor koptekst, zijbalk, hoofdgedeelte en voettekst — als afzonderlijke hulpprogrammaklassen. Deze werken goed samen met col-span-* en row-span-* voor complexere indelingen.
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>Animatiehulpprogramma's naast de ingebouwde hulpprogramma's
Tailwind biedt animate-spin, animate-pulse, animate-bounce en animate-ping. Voeg voor uitgebreidere animaties — zoals een wiebeleffect, een hartslag of een zweefeffect — aangepaste keyframes toe aan het thema en verwijs ernaar in een plugin. De plugin zorgt ervoor dat de namen van animatieklassen de conventie animate-* van Tailwind volgen, zodat het systeem consistent blijft.
// 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'Je aangepaste hulpprogramma's testen
Controleer of je pluginhulpprogramma's in de gegenereerde CSS verschijnen door een HTML-testbestand te maken waarin je de klassennamen gebruikt en vervolgens de Tailwind CLI uit te voeren. De JIT-engine moet de klasse kunnen vinden in een bestand dat overeenkomt met je content-globs. Test ook of responsieve varianten en statusvarianten werken als je dat verwacht — sommige hulpprogramma's voor pseudo-elementen, zoals ::-webkit-scrollbar, ondersteunen responsieve voorvoegsels niet op een zinvolle manier.
<!-- 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 -->Aangepaste hulpprogramma's documenteren
Documenteer aangepaste hulpprogramma's voor je team, zodat iedereen weet wat er beschikbaar is en hoe het moet worden gebruikt. Maak een bestand PLUGINS.md of een Storybook-pagina met elk aangepast hulpprogramma, de bijbehorende klassennamen, geaccepteerde waarden en gebruiksvoorbeelden. Zonder documentatie schrijven teamleden vaak dezelfde CSS twee keer — één keer als hulpprogramma en nogmaals als inline stijl — omdat ze niet wisten dat de plugin bestond.
/*
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'>
*/Prestatie-impact van aangepaste hulpprogramma's
Aangepaste hulpprogramma's vergroten de omvang van je gegenereerde CSS. Als een hulpprogramma veel varianten genereert, zoals afstandshulpprogramma's voor meer dan 30 schaalstappen, kan de uitvoer aanzienlijk groeien. Wees selectief in de hulpprogramma's die je programmatisch genereert. Gebruik matchUtilities met een kleine set themawaarden en vertrouw voor eenmalige gevallen op willekeurige waarden, in plaats van elke mogelijke combinatie vooraf te genereren. Zo blijft je CSS-bundel klein en behoud je toch flexibiliteit.
// 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
);
});Korte controle
Test je begrip van de concepten uit Tailwind CSS Mastery in deze les.
Lesoverzicht
In deze les heb je geleerd: addUtilities voegt statische aangepaste hulpprogrammaklassen toe, matchUtilities voegt hulpprogramma's met ondersteuning voor willekeurige waarden toe, en aangepaste hulpprogramma's moeten worden gedocumenteerd en beperkt blijven tot echte, herhaalde behoeften. Hierna leer je hoe je via plugins aangepaste statusvarianten toevoegt om aangepaste selectors en data-attributen te targeten.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Aangepaste utilities toevoegen via een plugin” gratis?
Ja — de volledige tekst van “Aangepaste utilities toevoegen via een plugin” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Aangepaste utilities toevoegen via een plugin”?
Schrijf een plugin die nieuwe utility-classes toevoegt, zoals text-shadow-* of scrollbar-hide, die niet in de standaarddistributie van Tailwind zitten. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Aangepaste utilities toevoegen via een plugin”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De Plugin-API van Tailwind
- Aangepaste utilities toevoegen via een plugin
- Aangepaste varianten toevoegen via een plugin
- Plugins publiceren en hergebruiken