Tailwinds plugin-API
Lär dig signaturen för funktionen plugin(), och få tillgång till hjälpfunktionerna addUtilities, addComponents, addBase och addVariant för att utöka Tailwinds utdata.
Tailwinds plugin-API är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 1 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.
Varför skriva Tailwind-pluginprogram?
Tailwinds inbyggda verktyg täcker de allra flesta CSS-behov, men det finns luckor. Du kanske behöver verktyget scrollbar-hide, en familj med text-shadow-verktyg eller en anpassad variant som not-last:. I stället för att skriva vanlig CSS utanför Tailwinds system kan pluginprogram lägga till dessa utökningar med samma konfigurationsstyrda metod som resten av Tailwind. Pluginprogram gör dina utökningar lätta att upptäcka, konsekventa och konfigurerbara.
Funktionen plugin()
Tailwind-pluginprogram registreras i arrayen plugins i tailwind.config.js. Varje pluginprogram definieras med funktionen plugin() från paketet tailwindcss/plugin. Funktionen tar emot ett återanrop som får fyra hjälpfunktioner: addUtilities, addComponents, addBase och addVariant. Dessa hjälpfunktioner injicerar stilar i Tailwinds lagersystem på rätt plats i den genererade CSS-koden.
// 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: lägga till verktygsklasser
addUtilities injicerar nya verktygsklasser i Tailwinds lager utilities. Skicka ett objekt där nycklarna är CSS-selektorsträngar (som börjar med en punkt) och värdena är objekt med CSS-egenskaper. Dessa verktyg fungerar precis som Tailwinds inbyggda verktyg – de svarar på responsiva prefix, hover-varianter och JIT-godtyckliga värden när de är korrekt konfigurerade.
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: lägga till komponentklasser
addComponents injicerar stilar i lagret components, som ligger mellan basstilar och verktyg. Komponentstilar har lägre specificitet än verktyg, så verktygsklasser kan alltid åsidosätta dem. Använd addComponents för återanvändbara komponentmönster med flera egenskaper, som .btn, .card eller .badge – motsvarigheten till att använda @apply i CSS-filer, men uttryckt som ett pluginprogram.
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: lägga till basstilar
addBase injicerar stilar i lagret base, som är Tailwinds lager med lägst specificitet. Använd det för CSS-reset, standardstilar för element eller globalt tillämpliga regler som ska ligga under alla andra stilar. addBase är platsen där du anger box-sizing-beteende, ett standardteckensnitt eller stil för inbyggda HTML-element.
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'
}
});
})Åtkomst till temat i pluginprogram
Återanrop för pluginprogram får en hjälpfunktion kallad theme som hämtar värden från din Tailwind-konfiguration. Då kan du referera till dina designtokens i CSS som genereras av pluginprogrammet, så att resultatet förblir konsekvent med resten av ditt designsystem. Använd theme('colors.blue.500'), theme('spacing.4'), theme('fontFamily.sans') och andra konfigurationssökvägar.
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);
})Generera verktyg från temavärden
Ett kraftfullt mönster är att programmässigt generera verktygsklasser från temats färgpalett, avståndsskala eller andra konfigurationsvärden. Använd JavaScripts objektspridning och hjälpfunktionen theme() för att iterera över paletten och generera flera verktyg samtidigt. Det är så Tailwind själv genererar sina hundratals färgverktyg från en enda färgdefinition.
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 för godtyckliga värden
Hjälpfunktionen matchUtilities skapar verktyg som stöder Tailwinds syntax för godtyckliga värden – hakparentessyntax som text-shadow-[0_2px_4px_rgba(0,0,0,0.3)]. När du använder matchUtilities kan användarna ange valfritt värde inom hakparenteser, vilket ger full flexibilitet samtidigt som verktygsnamnet följer ditt designsystems konvention.
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)'
}
}Pluginalternativ med withOptions
När du vill dela ett pluginprogram mellan projekt med konfigurerbart beteende använder du plugin.withOptions() för att skapa en fabrik som tar emot ett konfigurationsobjekt. Den yttre funktionen tar emot användaralternativ, och den inre funktionen tar emot Tailwinds hjälpfunktioner. Användarna kan sedan anropa ditt pluginprogram som en funktion med konfiguration, på liknande sätt som @tailwindcss/typography tar emot alternativ.
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' })
]Felsöka pluginprogram
När ett verktyg från ett pluginprogram inte visas i den genererade CSS-koden felsöker du med följande steg: kontrollera att pluginprogrammet finns i arrayen plugins, kontrollera att selektorsyntaxen är korrekt (den måste börja med .) och bekräfta att en fil i sökvägarna i content faktiskt använder klassnamnet (JIT genererar bara klasser som det hittar). Kör npx tailwindcss build med --content för att granska den genererade CSS-koden direkt.
# 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']Använda officiella Tailwind-pluginprogram
Kontrollera de officiella Tailwind-pluginprogrammen innan du skriver ett anpassat pluginprogram. @tailwindcss/typography lägger till klassen prose för formatering av HTML-innehåll, till exempel markdown. @tailwindcss/forms normaliserar stilar för formulärelement i olika webbläsare. @tailwindcss/aspect-ratio (äldre) lägger till verktyg för bildförhållanden. Installera dem via npm och lägg till dem i arrayen plugins med valfri konfiguration.
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' />Snabbkontroll
Testa dina kunskaper om koncepten i Tailwind CSS Mastery från den här lektionen.
Lektionssammanfattning
I den här lektionen lärde Ni Er att: plugin() är ingångspunkten för alla Tailwind-tillägg, addUtilities/addComponents/addBase lägger till innehåll i rätt CSS-lager på rätt specificitetsnivå, och matchUtilities möjliggör stöd för godtyckliga värden i anpassade verktygsklasser. Härnäst bygger vi ett praktiskt anpassat verktygsklassplugin som lägger till verktygsklasser för rullningslister och textskuggor.
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 ”Tailwinds plugin-API” gratis?
Ja – hela texten till ”Tailwinds plugin-API” 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 ”Tailwinds plugin-API”?
Lär dig signaturen för funktionen plugin(), och få tillgång till hjälpfunktionerna addUtilities, addComponents, addBase och addVariant för att utöka Tailwinds utdata. 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 1 av 4.
Hur lång tid tar lektionen ”Tailwinds plugin-API”?
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