Legge til egendefinerte verktøyklasser via en plugin
Skriv en plugin som legger til nye verktøyklasser som text-shadow-* eller scrollbar-hide, som ikke finnes i standarddistribusjonen av Tailwind.
Legge til egendefinerte verktøyklasser via en plugin er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 2 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.
Når De bør legge til en egendefinert utility
Legg til en egendefinert utility når De oppdager at De stadig skriver den samme rå-CSS-en i @apply-blokker eller inline-stiler, når Tailwind mangler en utility for en gyldig CSS-egenskap, eller når en kombinasjon av nettleserspesifikke prefikser trenger et ryddig klassenavn. Gode egendefinerte utilities følger Tailwinds prinsipp om ett ansvarsområde: Én utility styrer én CSS-egenskap eller en tett beslektet gruppe. Unngå å lage utilities som setter mange urelaterte egenskaper – dette hører hjemme i komponenter.
Utility for å skjule rullefelt
En av de mest etterspurte egendefinerte utilities er .scrollbar-hide – den skjuler rullefeltet visuelt, samtidig som elementet fortsatt kan rulles. Dette krever leverandørspesifikke egenskaper i ulike nettlesere: scrollbar-width: none for Firefox og -webkit-scrollbar: display none for Chromium-nettlesere. Når dette pakkes inn i en plugin, blir det tilgjengelig som en enkel scrollbar-hide-klasse hvor som helst i markeringen.
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'>...Utilities for tekstskygge
CSS-egenskapen text-shadow brukes ofte, men er ikke inkludert i Tailwind som standard. Ved å bygge en plugin for den med integrasjon mot temaet kan brukerne benytte den som enhver innebygd utility, samtidig som den kan tilpasses via konfigurasjonen. Definer standardverdier i temaet og referer til dem i pluginen, slik at utilityen respekterer brukerens overstyringer 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)]Utilities for skriveretning
CSS-logiske egenskaper for skriveretning (margin-inline-start, padding-inline-end, inset-inline-start) gjør det mulig å støtte oppsett fra høyre mot venstre (RTL) uten duplisert CSS. Tailwind v3 la til noen logiske egenskaper, men De kan skrive en plugin for å dekke eventuelle gjenværende mangler, med en konsekvent navnekonvensjon 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);
})Utility for gradienttekst
Gradienttekst krever en kombinasjon av tre CSS-egenskaper: background-clip: text, -webkit-background-clip: text og color: transparent. Siden de faktiske gradientfargene kommer fra utilities som bg-gradient-to-* og from-*/to-*, trenger pluginen bare å levere grunnlaget for klipping. Dette er en klassisk utility med flere egenskaper, som med fordel kan ha ett enkelt og minneverdig 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>Utility for automatisk utfylling i grid
CSS Grids gjentakelsesmønstre auto-fill og auto-fit for responsive gridoppsett er vanlige, men krever omstendelig syntaks. En plugin som genererer parameteriserbare grid-utilities for de vanligste minimumsbreddeverdiene for kolonner, gjør det betydelig enklere å skrive responsive gridoppsett. Bruk matchUtilities slik at brukerne kan angi 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>Utilities for CSS Grid-områder
Navngitte gridområder via grid-template-areas krever omstendelig CSS som er vanskelig å uttrykke med Tailwinds utility-modell. En plugin kan legge til utilities for vanlige oppsett med navngitte områder – for eksempel et klassisk sideoppsett med områder for topptekst, sidestolpe, hovedinnhold og bunntekst – som enkeltstående utility-klasser. Disse passer godt sammen med col-span-* og row-span-* for mer komplekse oppsett.
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>Animasjonsutilities utover de innebygde
Tailwind tilbyr animate-spin, animate-pulse, animate-bounce og animate-ping. For mer avanserte animasjoner – som en vrikking, et hjerteslag eller en flyteeffekt – kan De legge til egendefinerte keyframes i temaet og referere til dem i en plugin. Pluginen sørger for at animasjonsklassenavnene følger Tailwinds animate-*-konvensjon, slik at systemet forblir konsekvent.
// 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'Teste de egendefinerte utilityene
Kontroller at plugin-utilityene vises i den genererte CSS-en, ved å opprette en testfil i HTML som bruker klassenavnene, og kjøre Tailwind CLI. JIT-motoren må finne klassen i en fil som samsvarer med innholdsmønstrene Deres. Test også at responsive varianter og tilstandsvarianter fungerer dersom De har tenkt å bruke dem – enkelte utilities for pseudoelementer, som ::-webkit-scrollbar, støtter ikke responsive prefikser på en meningsfull måte.
<!-- 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 -->Dokumentere egendefinerte utilities
Dokumenter egendefinerte utilities for teamet, slik at medlemmene vet hva som finnes og hvordan det skal brukes. Opprett en PLUGINS.md-fil eller en Storybook-side som viser hver egendefinerte utility med klassenavn, tillatte verdier og brukseksempler. Uten dokumentasjon skriver teammedlemmer ofte den samme CSS-en to ganger – én gang som en utility og én gang som inline-stiler – fordi de ikke visste at pluginen fantes.
/*
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'>
*/Ytelsespåvirkning fra egendefinerte utilities
Egendefinerte utilities øker størrelsen på den genererte CSS-en. Hvis en utility genererer mange kombinasjoner, for eksempel spacing-utilities på tvers av mer enn 30 skalatrinn, kan resultatet vokse betydelig. Vær selektiv med hvilke utilities De genererer programmatisk. Bruk matchUtilities med et lite sett temaverdier, og stol på vilkårlige verdier for enkelttilfeller i stedet for å forhåndsgenerere alle mulige kombinasjoner. Dette holder CSS-pakken liten, samtidig som fleksibiliteten bevares.
// 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
);
});Kort kontroll
Test forståelsen Deres av konseptene i Tailwind CSS Mastery fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De: addUtilities legger til statiske egendefinerte utility-klasser, matchUtilities legger til utilities med støtte for vilkårlige verdier, og egendefinerte utilities bør dokumenteres og avgrenses til reelle, gjentatte behov. Neste steg er å lære hvordan De legger til egendefinerte tilstandsvarianter via plugins for å målrette egendefinerte selektorer og dataattributter.
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 «Legge til egendefinerte verktøyklasser via en plugin» gratis?
Ja – hele teksten i «Legge til egendefinerte verktøyklasser via en plugin» 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 «Legge til egendefinerte verktøyklasser via en plugin»?
Skriv en plugin som legger til nye verktøyklasser som text-shadow-* eller scrollbar-hide, som ikke finnes i standarddistribusjonen av Tailwind. 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 2 av 4.
Hvor lang tid tar leksjonen «Legge til egendefinerte verktøyklasser via en plugin»?
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