De Plugin-API van Tailwind
Leer de signatuur van de functie plugin() en krijg toegang tot de helpers addUtilities, addComponents, addBase en addVariant om de output van Tailwind uit te breiden.
De Plugin-API van Tailwind is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 1 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.
Waarom Tailwind-plug-ins schrijven?
De ingebouwde hulpprogramma's van Tailwind dekken het overgrote deel van de CSS-behoeften, maar er zijn hiaten. Misschien heb je een hulpprogramma scrollbar-hide, een familie text-shadow of een aangepaste variant zoals not-last: nodig. In plaats van onbewerkte CSS buiten het systeem van Tailwind te schrijven, kun je met plug-ins deze uitbreidingen toevoegen via dezelfde configuratiegestuurde aanpak als de rest van Tailwind. Plug-ins houden je uitbreidingen vindbaar, consistent en configureerbaar.
De functie plugin()
Tailwind-plug-ins worden geregistreerd in de array plugins van tailwind.config.js. Elke plug-in wordt gedefinieerd met de functie plugin() uit het pakket tailwindcss/plugin. De functie ontvangt een callback die vier hulpfuncties krijgt: addUtilities, addComponents, addBase en addVariant. Deze hulpfuncties voegen stijlen op de juiste positie in het gegenereerde CSS-bestand toe aan het lagensysteem van Tailwind.
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: { extend: {} },
plugins: [
plugin(function({ addUtilities, addComponents, addBase, addVariant }) {
// Your extension code here
})
]
};addUtilities: hulpprogrammaklassen toevoegen
addUtilities voegt nieuwe hulpprogrammaklassen toe aan de laag utilities van Tailwind. Geef deze functie een object waarin de sleutels CSS-selectorreeksen zijn (beginnend met een punt) en de waarden objecten met CSS-eigenschappen. Deze hulpprogramma's werken precies zoals ingebouwde Tailwind-hulpprogramma's — ze reageren op responsieve voorvoegsels, hovervarianten en willekeurige JIT-waarden wanneer ze correct zijn geconfigureerd.
plugin(function({ addUtilities }) {
addUtilities({
'.scrollbar-hide': {
'-ms-overflow-style': 'none',
'scrollbar-width': 'none',
'&::-webkit-scrollbar': {
display: 'none'
}
},
'.text-balance': {
'text-wrap': 'balance'
},
'.content-auto': {
'content-visibility': 'auto'
}
});
})
// Now usable in markup:
// <div class='scrollbar-hide overflow-auto h-64'>...
// <h1 class='text-balance text-4xl font-bold'>...addComponents: componentklassen toevoegen
addComponents voegt stijlen toe aan de laag components, die tussen de basisstijlen en hulpprogramma's staat. Componentstijlen hebben een lagere specificiteit dan hulpprogramma's, zodat hulpprogrammaklassen ze altijd kunnen overschrijven. Gebruik addComponents voor herbruikbare componentpatronen met meerdere eigenschappen, zoals .btn, .card of .badge — het equivalent van @apply in CSS-bestanden, maar uitgedrukt als een plug-in.
plugin(function({ addComponents }) {
addComponents({
'.btn': {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: '0.5rem 1rem',
borderRadius: '0.5rem',
fontWeight: '500',
fontSize: '0.875rem',
transitionProperty: 'color, background-color',
transitionDuration: '150ms',
cursor: 'pointer'
},
'.btn-primary': {
backgroundColor: '#3b82f6',
color: '#ffffff',
'&:hover': {
backgroundColor: '#1d4ed8'
}
}
});
})addBase: basisstijlen toevoegen
addBase voegt stijlen toe aan de laag base, de laag met de laagste specificiteit in Tailwind. Gebruik deze voor CSS-resets, standaardstijlen voor elementen of globaal toepasbare regels die onder alle andere stijlen moeten liggen. Met addBase stel je bijvoorbeeld het box-sizing-gedrag en een standaardlettertype in of geef je native HTML-elementen een stijl.
plugin(function({ addBase, theme }) {
addBase({
// Style all h1-h6 elements with a consistent font
'h1, h2, h3, h4, h5, h6': {
fontFamily: theme('fontFamily.heading'),
fontWeight: theme('fontWeight.semibold'),
lineHeight: theme('lineHeight.tight')
},
// Custom focus style for all focusable elements
':focus-visible': {
outline: '2px solid ' + theme('colors.blue.500'),
outlineOffset: '2px'
},
// Smooth scrolling for the whole page
'html': {
scrollBehavior: 'smooth'
}
});
})Het thema in plug-ins benaderen
Callbacks van plug-ins ontvangen een hulpfunctie theme die waarden uit je Tailwind-configuratie ophaalt. Zo kun je in door plug-ins gegenereerde CSS naar je ontwerptokens verwijzen, waardoor de uitvoer van de plug-in consistent blijft met de rest van je ontwerpsysteem. Gebruik theme('colors.blue.500'), theme('spacing.4'), theme('fontFamily.sans') en elk ander configuratiepad.
plugin(function({ addUtilities, theme }) {
// Generate text-shadow utilities using spacing scale
const shadows = {
'.text-shadow-sm': {
textShadow: '0 1px 2px ' + theme('colors.black/20')
},
'.text-shadow': {
textShadow: '0 2px 4px ' + theme('colors.black/30')
},
'.text-shadow-lg': {
textShadow: '0 8px 16px ' + theme('colors.black/40')
},
'.text-shadow-none': {
textShadow: 'none'
}
};
addUtilities(shadows);
})Hulpprogramma's genereren vanuit them waarden
Een krachtig patroon is het programmatisch genereren van hulpprogrammaklassen vanuit het kleurenpalet, de afstandsschaal of andere configuratiewaarden van het thema. Gebruik het spreiden van JavaScript-objecten en de hulpfunctie theme() om je palet te doorlopen en meerdere hulpprogramma's tegelijk te genereren. Zo genereert Tailwind zelf honderden kleurhulpprogramma's vanuit één kleurdefinitie.
plugin(function({ addUtilities, theme }) {
// Generate border-start-* utilities from the color palette
const colors = theme('colors');
const utilities = {};
Object.entries(colors).forEach(([colorName, shades]) => {
if (typeof shades === 'string') {
utilities['.border-start-' + colorName] = {
borderInlineStartColor: shades
};
} else {
Object.entries(shades).forEach(([shade, value]) => {
utilities['.border-start-' + colorName + '-' + shade] = {
borderInlineStartColor: value
};
});
}
});
addUtilities(utilities);
})matchUtilities voor willekeurige waarden
De hulpfunctie matchUtilities maakt hulpprogramma's die Tailwinds syntaxis voor willekeurige waarden ondersteunen — notatie met vierkante haken, zoals text-shadow-[0_2px_4px_rgba(0,0,0,0.3)]. Wanneer je matchUtilities gebruikt, kunnen gebruikers elke waarde tussen vierkante haken opgeven. Zo krijgen ze volledige flexibiliteit, terwijl de naam van het hulpprogramma consistent blijft met de conventie van je ontwerpsysteem.
plugin(function({ matchUtilities, theme }) {
matchUtilities(
{
'text-shadow': (value) => ({
textShadow: value
})
},
{
// Values from the theme that appear as autocomplete suggestions
values: theme('textShadow')
}
);
// Usage: text-shadow-sm (from theme) or
// text-shadow-[0_4px_8px_rgba(0,0,0,0.5)] (arbitrary)
})
// tailwind.config.js theme extension:
theme: {
textShadow: {
sm: '0 1px 2px rgba(0,0,0,0.2)',
DEFAULT: '0 2px 4px rgba(0,0,0,0.3)',
lg: '0 8px 16px rgba(0,0,0,0.4)'
}
}Opties voor plug-ins met withOptions
Als je een plug-in wilt delen tussen projecten met configureerbaar gedrag, gebruik je plugin.withOptions() om een fabriek te maken die een configuratieobject accepteert. De buitenste functie ontvangt de opties van de gebruiker; de binnenste functie ontvangt de hulpfuncties van Tailwind. Gebruikers kunnen je plug-in vervolgens als functie met configuratie aanroepen, vergelijkbaar met de manier waarop @tailwindcss/typography opties accepteert.
const plugin = require('tailwindcss/plugin');
// scrollbar plugin with options
const scrollbarPlugin = plugin.withOptions(function(options = {}) {
return function({ addUtilities }) {
const { width = '6px', track = '#f1f5f9', thumb = '#94a3b8' } = options;
addUtilities({
'.scrollbar-custom': {
'&::-webkit-scrollbar': { width },
'&::-webkit-scrollbar-track': { background: track },
'&::-webkit-scrollbar-thumb': { background: thumb, borderRadius: '3px' }
}
});
};
});
// tailwind.config.js usage:
plugins: [
scrollbarPlugin({ width: '8px', thumb: '#3b82f6' })
]Plug-ins debuggen
Als een hulpprogramma van een plug-in niet in het CSS-bestand verschijnt, voer je deze stappen uit: controleer of de plug-in in de array plugins staat, controleer of de syntaxis van de selector klopt (deze moet met . beginnen) en bevestig dat een bestand in de paden van content de klassenaam daadwerkelijk gebruikt (JIT genereert alleen klassen die het detecteert). Voer npx tailwindcss build uit met --content om het CSS-bestand rechtstreeks te inspecteren.
# Debug: build CSS and inspect output
npx tailwindcss \
--input src/input.css \
--output dist/debug.css \
--content 'src/**/*.html'
# Then check:
grep 'text-shadow' dist/debug.css
# If missing:
# 1. Is the class used in an HTML file in content paths?
# 2. Does the addUtilities selector start with '.'?
# 3. Is the plugin listed in tailwind.config.js plugins array?
# Safelist it temporarily to confirm plugin works:
safelist: ['text-shadow-lg']Officiële Tailwind-plug-ins gebruiken
Controleer de officiële Tailwind-plug-ins voordat je een aangepaste plug-in schrijft. @tailwindcss/typography voegt een klasse prose toe voor het opmaken van HTML-inhoud, zoals markdown. @tailwindcss/forms normaliseert de stijlen van formulierelementen in verschillende browsers. @tailwindcss/aspect-ratio (verouderd) voegt hulpprogramma's voor beeldverhoudingen toe. Installeer ze via npm en voeg ze met optionele configuratie toe aan de array plugins.
npm install @tailwindcss/typography @tailwindcss/forms
// tailwind.config.js
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms')({
strategy: 'class' // use .form-input etc. classes
})
]
// Usage:
<article class='prose prose-lg prose-blue max-w-none'>
{/* Beautifully styled HTML content */}
</article>
<input type='text' class='form-input rounded-lg border-gray-300' />Korte controle
Test je begrip van de concepten uit Tailwind CSS Mastery in deze les.
Samenvatting van de les
In deze les heb je geleerd: plugin() is het toegangspunt voor alle Tailwind-uitbreidingen, addUtilities/addComponents/addBase voegen code toe aan de juiste CSS-laag met de juiste specificiteit, en matchUtilities maakt ondersteuning voor willekeurige waarden in aangepaste hulpprogramma's mogelijk. Hierna bouwen we een praktisch aangepaste-hulpprogrammaplugin die hulpprogramma's voor schuifbalken en tekstschaduwen toevoegt.
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 “De Plugin-API van Tailwind” gratis?
Ja — de volledige tekst van “De Plugin-API van Tailwind” 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 “De Plugin-API van Tailwind”?
Leer de signatuur van de functie plugin() en krijg toegang tot de helpers addUtilities, addComponents, addBase en addVariant om de output van Tailwind uit te breiden. 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 1 van 4.
Hoe lang duurt de les “De Plugin-API van Tailwind”?
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