Lägg till anpassade verktyg via en plugin
Skriv en plugin som lägger till nya verktygsklasser, som text-shadow-* eller scrollbar-hide, som inte finns i Tailwinds standarddistribution.
Lägg till anpassade verktyg via en plugin är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
När Ni bör lägga till en anpassad verktygsklass
Lägg till en anpassad verktygsklass när Ni märker att Ni upprepade gånger skriver samma råa CSS i @apply-block eller inline-formatmallar, när Tailwind saknar en verktygsklass för en giltig CSS-egenskap eller när en kombination av webbläsarspecifika prefix behöver ett tydligt klassnamn. Bra anpassade verktygsklasser följer Tailwinds princip om ett enda ansvarsområde: en verktygsklass styr en CSS-egenskap eller en grupp av nära relaterade egenskaper. Undvik att skapa verktygsklasser som anger många orelaterade egenskaper – sådana hör hemma i komponenter.
Verktygsklass för att dölja rullningslisten
En av de vanligaste efterfrågade anpassade verktygsklasserna är .scrollbar-hide – den döljer rullningslisten visuellt samtidigt som elementet fortfarande kan rullas. Detta kräver leverantörsspecifika egenskaper i olika webbläsare: scrollbar-width: none för Firefox och -webkit-scrollbar: display none för Chromium-baserade webbläsare. Genom att paketera detta i ett plugin blir det tillgängligt som en enkel scrollbar-hide-klass var som helst i Er 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'>...Verktygsklasser för textskuggor
CSS-egenskapen text-shadow används ofta, men ingår inte i Tailwind som standard. Genom att bygga ett plugin för den med integrering i temat kan användare använda den som vilken inbyggd verktygsklass som helst och dessutom anpassa den via konfigurationen. Definiera standardvärden i temat och referera till dem i pluginet, så att verktygsklassen respekterar användarens åsidosättningar 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)]Verktygsklasser för skrivriktning
CSS:ens logiska egenskaper för skrivriktning (margin-inline-start, padding-inline-end, inset-inline-start) möjliggör stöd för höger-till-vänster-layout (RTL) utan duplicerad CSS. Tailwind v3 lade till vissa logiska egenskaper, men Ni kan skriva ett plugin för att täcka återstående luckor med en konsekvent namnkonvention som följer 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);
})Verktygsklass för gradienttext
Gradienttext kräver en kombination av tre CSS-egenskaper: background-clip: text, -webkit-background-clip: text och color: transparent. Eftersom de faktiska gradientfärgerna kommer från verktygsklasserna bg-gradient-to-* och from-*/to-* behöver pluginet bara tillhandahålla grunden för klippningen. Detta är en klassisk verktygsklass med flera egenskaper som vinner på att vara ett enda, lätt ihågkommet klassnamn.
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>Verktygsklass för automatisk ifyllnad i grid
CSS Grids upprepningsmönster auto-fill och auto-fit för responsiva gridlayouter är vanliga, men kräver omständlig syntax. Ett plugin som genererar parameteriserbara gridverktygsklasser för de vanligaste minsta kolumnbredderna gör responsiva gridlayouter betydligt enklare att skriva. Använd matchUtilities så att användare kan ange godtyckliga minsta kolumnbredder.
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>Verktygsklasser för CSS Grid-områden
Namngivna gridområden via grid-template-areas kräver omständlig CSS som är svår att uttrycka med Tailwinds verktygsklassmodell. Ett plugin kan lägga till verktygsklasser för vanliga layouter med namngivna områden – till exempel en klassisk sidlayout med områden för sidhuvud, sidopanel, huvudinnehåll och sidfot – som enskilda verktygsklasser. Dessa passar bra tillsammans med col-span-* och row-span-* för mer komplexa layouter.
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>Animeringsverktyg utöver de inbyggda
Tailwind tillhandahåller animate-spin, animate-pulse, animate-bounce och animate-ping. För mer avancerade animeringar – som en vickning, ett hjärtslag eller en svävande effekt – lägger Ni till anpassade keyframes i temat och refererar till dem i ett plugin. Pluginet ser till att animeringsklassernas namn följer Tailwinds konvention animate-*, så att systemet förblir enhetligt.
// 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'Testa Era anpassade verktygsklasser
Kontrollera att Era verktygsklasser förekommer i den genererade CSS:en genom att skapa en test-HTML-fil som använder klassnamnen och köra Tailwind CLI. JIT-motorn måste hitta klassen i en fil som matchar Era content-globs. Testa även att responsiva varianter och tillståndsvarianter fungerar om Ni avser att använda dem – vissa verktygsklasser för pseudo-element, som ::-webkit-scrollbar, stöder inte responsiva prefix på något meningsfullt sätt.
<!-- 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 -->Dokumentera anpassade verktygsklasser
Dokumentera anpassade verktygsklasser för teamet så att alla vet vad som finns och hur det ska användas. Skapa en fil med namnet PLUGINS.md eller en Storybook-sida som listar varje anpassad verktygsklass med klassnamn, tillåtna värden och användningsexempel. Utan dokumentation skriver teammedlemmar ofta samma CSS två gånger – en gång som en verktygsklass och en gång som inline-format – eftersom de inte kände till att pluginet fanns.
/*
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'>
*/Prestandapåverkan från anpassade verktygsklasser
Anpassade verktygsklasser ökar storleken på den genererade CSS:en. Om en verktygsklass genererar många permutationer, exempelvis avståndsverktygsklasser över fler än 30 skalsteg, kan resultatet växa avsevärt. Var selektiv med vilka verktygsklasser Ni genererar programmatiskt. Använd matchUtilities med en liten uppsättning temavärden och förlita Er på godtyckliga värden i enstaka fall, i stället för att förgenerera alla möjliga kombinationer. På så sätt hålls CSS-paketet litet samtidigt som flexibiliteten bevaras.
// 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
);
});Snabbtest
Testa Era kunskaper om begreppen i Tailwind CSS Mastery från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde Ni Er att: addUtilities lägger till statiska anpassade verktygsklasser, matchUtilities lägger till verktygsklasser med stöd för godtyckliga värden, och anpassade verktygsklasser bör dokumenteras och avgränsas till verkliga, återkommande behov. Härnäst lär vi oss hur man lägger till anpassade tillståndsvarianter via plugin för att rikta in sig på anpassade selektorer och dataattribut.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Lägg till anpassade verktyg via en plugin” gratis?
Ja – hela texten till ”Lägg till anpassade verktyg via en plugin” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Lägg till anpassade verktyg via en plugin”?
Skriv en plugin som lägger till nya verktygsklasser, som text-shadow-* eller scrollbar-hide, som inte finns i Tailwinds standarddistribution. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Lägg till anpassade verktyg via en plugin”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Tailwinds plugin-API
- Lägg till anpassade verktyg via en plugin
- Lägg till anpassade varianter via en plugin
- Publicera och återanvänd plugins