Tailwinds plugin-API
Lær signaturen til plugin()-funksjonen, og få tilgang til hjelpefunksjonene addUtilities, addComponents, addBase og addVariant for å utvide Tailwinds resultat.
Tailwinds plugin-API er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hvorfor skrive Tailwind-plugins?
Tailwinds innebygde verktøy dekker det aller meste av CSS-behovene, men det finnes noen mangler. De kan ha behov for et scrollbar-hide-verktøy, en text-shadow-familie eller en egendefinert variant som not-last:. I stedet for å skrive rå CSS utenfor Tailwind-systemet kan De bruke plugins til å legge til disse utvidelsene med den samme konfigurasjonsstyrte tilnærmingen som resten av Tailwind. Plugins gjør utvidelsene Deres enkle å finne, konsekvente og konfigurerbare.
plugin()-funksjonen
Tailwind-plugins registreres i plugins-matrisen i tailwind.config.js. Hvert plugin defineres ved hjelp av plugin()-funksjonen fra pakken tailwindcss/plugin. Funksjonen tar imot en tilbakeringing som får fire hjelpefunksjoner: addUtilities, addComponents, addBase og addVariant. Disse hjelpefunksjonene legger stiler inn i Tailwinds lagdelingssystem på riktig plass i den genererte CSS-en.
// 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: legge til verktøyklasser
addUtilities legger nye verktøyklasser inn i Tailwinds utilities-lag. Send inn et objekt der nøklene er CSS-selektorstrenger (som begynner med et punktum), og verdiene er objekter med CSS-egenskaper. Disse verktøyene fungerer akkurat som Tailwinds innebygde verktøy – de reagerer på responsive prefikser, hover-varianter og vilkårlige JIT-verdier når de er riktig konfigurert.
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: legge til komponentklasser
addComponents legger stiler inn i components-laget, som ligger mellom base-stiler og verktøy. Komponentstiler har lavere spesifisitet enn verktøy, slik at verktøyklasser alltid kan overstyre dem. Bruk addComponents for gjenbrukbare komponentmønstre med flere egenskaper, som .btn, .card eller .badge – tilsvarende bruk av @apply i CSS-filer, men uttrykt som et plugin.
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: legge til basestiler
addBase legger stiler inn i base-laget, som er laget med lavest spesifisitet i Tailwind. Bruk det til CSS-resetter, standardstiler for elementer eller globale regler som skal ligge under alle andre stiler. addBase er stedet der De kan angi box-sizing-oppførsel, en standardfont eller stilsette innebygde HTML-elementer.
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'
}
});
})Få tilgang til temaet i plugins
Plugin-tilbakeringinger mottar en theme-hjelpefunksjon som henter verdier fra Tailwind-konfigurasjonen Deres. Dette gjør det mulig å referere til designtokenene Deres i CSS-en som genereres av pluginet, slik at resultatet samsvarer med resten av designsystemet. Bruk theme('colors.blue.500'), theme('spacing.4'), theme('fontFamily.sans') og alle andre konfigurasjonsbaner.
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);
})Generere verktøy fra temaverdier
Et effektivt mønster er å generere verktøyklasser programmatisk fra temaets fargepalett, avstandsskala eller andre konfigurasjonsverdier. Bruk JavaScript-objektspredning og theme()-hjelpefunksjonen til å iterere over paletten og generere flere verktøy samtidig. Det er slik Tailwind selv genererer hundrevis av fargeverktøy fra én enkelt fargedefinisjon.
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 for vilkårlige verdier
matchUtilities-hjelpefunksjonen oppretter verktøy som støtter Tailwinds syntaks for vilkårlige verdier – hakeparentesnotasjon som text-shadow-[0_2px_4px_rgba(0,0,0,0.3)]. Når De bruker matchUtilities, kan brukerne angi en hvilken som helst verdi i hakeparentesene. Det gir full fleksibilitet, samtidig som verktøynavnet følger konvensjonen i designsystemet Deres.
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)'
}
}Plugin-alternativer med withOptions
Når De vil dele et plugin mellom prosjekter med konfigurerbar oppførsel, kan De bruke plugin.withOptions() til å opprette en fabrikk som tar imot et konfigurasjonsobjekt. Den ytre funksjonen mottar brukerens alternativer, mens den indre funksjonen mottar Tailwinds hjelpefunksjoner. Brukerne kan deretter kalle pluginet som en funksjon med konfigurasjon, på samme måte som @tailwindcss/typography tar imot alternativer.
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' })
]Feilsøke plugins
Når et verktøy fra et plugin ikke vises i den genererte CSS-en, kan De feilsøke med disse trinnene: Kontroller at pluginet finnes i plugins-matrisen, sjekk at selektorsyntaksen er riktig (den må begynne med .), og bekreft at en fil i content-banene faktisk bruker klassenavnet (JIT genererer bare klasser som det oppdager). Kjør npx tailwindcss build med --content for å undersøke den genererte CSS-en direkte.
# 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']Bruke offisielle Tailwind-plugins
Før De skriver et egendefinert plugin, bør De undersøke de offisielle Tailwind-pluginene. @tailwindcss/typography legger til en prose-klasse for stilsetting av HTML-innhold (for eksempel markdown). @tailwindcss/forms normaliserer stiler for skjemaelementer på tvers av nettlesere. @tailwindcss/aspect-ratio (eldre) legger til verktøy for størrelsesforhold. Installer dem via npm, og legg dem til i plugins-matrisen med valgfri konfigurasjon.
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' />Hurtigsjekk
Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De: plugin() er inngangspunktet for alle Tailwind-utvidelser, addUtilities/addComponents/addBase setter innhold inn i riktig CSS-lag på riktig spesifisitetsnivå, og matchUtilities muliggjør støtte for vilkårlige verdier i egendefinerte utilities. Neste steg er å bygge en praktisk plugin med egendefinerte utilities som legger til utilities for skjuling av rullefelt og tekstskygge.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Tailwinds plugin-API» gratis?
Ja – hele teksten i «Tailwinds plugin-API» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Tailwinds plugin-API»?
Lær signaturen til plugin()-funksjonen, og få tilgang til hjelpefunksjonene addUtilities, addComponents, addBase og addVariant for å utvide Tailwinds resultat. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Tailwinds plugin-API»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Tailwinds plugin-API
- Legge til egendefinerte verktøyklasser via en plugin
- Legge til egendefinerte varianter via en plugin
- Publisere og gjenbruke plugins