Utöka eller ersätta temat
Använd theme.extend för att lägga till nya värden bredvid standardvärdena, jämfört med theme för att helt ersätta standardvärdena, med praktiska exempel på båda metoderna.
Utöka eller ersätta temat är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 3 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.
Två sätt att anpassa temat
När du vill lägga till anpassade värden i Tailwinds designsystem har du två alternativ: extend standardvärdena eller override dem. Att utöka lägger till dina värden bredvid Tailwinds inbyggda värden. Att ersätta byter ut Tailwinds inbyggda värden mot endast de värden du anger. Fel val kan omärkbart ta bort utilities som du är beroende av, så det är viktigt att förstå skillnaden innan du ändrar tailwind.config.js.
Vad det innebär att utöka
När du placerar värden i theme.extend slår Tailwind ihop dem med motsvarande standardvärden. Resultatet blir hela standarduppsättningen plus dina tillägg. Om du till exempel lägger till en anpassad färg i theme.extend.colors får du alla Tailwinds inbyggda färger (röd, blå, grön och så vidare) OCH din anpassade färg. Ingenting går förlorat.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
// ADDED alongside default colors like red, blue, gray...
brand: {
light: '#818cf8',
DEFAULT: '#6366f1',
dark: '#4f46e5',
},
},
},
},
};
// Now you can use BOTH:
// bg-brand-DEFAULT, bg-brand-light, bg-brand-dark (custom)
// bg-blue-500, bg-red-400, bg-gray-100 (still available!)Vad det innebär att ersätta
När du placerar värden direkt i theme (utanför extend) ersätter Tailwind hela standarduppsättningen med dina värden. Det innebär att alla Tailwinds inbyggda färger, avstånd, textstorlekar eller andra kategorier som du ersätter försvinner — endast dina värden finns kvar. Detta är avsiktligt i vissa fall men kan orsaka problem om det görs av misstag.
// tailwind.config.js
module.exports = {
theme: {
colors: {
// REPLACES all default colors! bg-blue-500 and bg-red-400 no longer exist.
brand: '#6366f1',
danger: '#ef4444',
success: '#22c55e',
},
},
};
// Only these work now:
// bg-brand, text-danger, border-success
// bg-blue-500 is GONE!När du bör ersätta
Det är lämpligt att ersätta när du vill ha ett minimalt, helt anpassat designsystem utan att några Tailwind-standardvärden läcker igenom. Designbyråer som bygger varumärkesspecifika webbplatser ersätter ibland hela färgpaletten för att säkerställa att endast varumärkets färger kan användas. Att ersätta är även användbart för teckensnittsfamiljer när du bara vill ha dina valda teckensnitt tillgängliga, inte de inbyggda teckensnittsuppsättningarna.
// Intentional override: only use brand fonts
module.exports = {
theme: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'monospace'],
},
// No extend: we intentionally remove 'serif' font family
},
};Utöka färger med anpassade nyanser
Det vanligaste användningsområdet för theme.extend är att lägga till anpassade färger med en fullständig nyansskala. Definiera din varumärkesfärg som ett objekt med nyansnummer från 50 till 950, precis som Tailwinds inbyggda palett. Då kan din anpassade färg användas med alla Tailwinds färgutilities — text-brand-500, bg-brand-100, border-brand-800 — och fungerar bra tillsammans med syntaxen för opacitetsmodifierare.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#eef2ff',
100: '#e0e7ff',
200: '#c7d2fe',
300: '#a5b4fc',
400: '#818cf8',
500: '#6366f1',
600: '#4f46e5',
700: '#4338ca',
800: '#3730a3',
900: '#312e81',
950: '#1e1b4b',
},
},
},
},
};Utöka avstånd
Tailwinds standardiserade avståndsskala går upp till 96 (24rem). Om dina designer använder större värden lägger du till dem i theme.extend.spacing. Dessa nya avståndsvärden blir automatiskt tillgängliga i alla avståndsrelaterade utilities: m-*, p-*, w-*, h-*, gap-*, inset-* och fler — utan någon extra konfiguration.
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'128': '32rem', // w-128, h-128, m-128, p-128...
'144': '36rem',
'160': '40rem',
'4.5': '1.125rem', // fine-grained values
},
},
},
};Utöka textstorlekar
Textstorleksutilities i Tailwind definieras som tupler — en textstorlek OCH en motsvarande radhöjd. När du lägger till en anpassad textstorlek i theme.extend.fontSize kan du ange endast storleken (så tilldelar Tailwind en standardradhöjd) eller en array med både storlek och radhöjd uttryckligen angivna. Då blir dina anpassade textstorlekar lika förutsägbara som Tailwinds inbyggda.
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
'2xs': ['0.625rem', { lineHeight: '1rem' }], // text-2xs
'3xs': ['0.5rem', { lineHeight: '0.875rem' }], // text-3xs
'hero': ['4.5rem', { lineHeight: '1', letterSpacing: '-0.02em' }],
},
},
},
};Utöka brytpunkter
Tailwinds fem standardbrytpunkter täcker de flesta användningsfall, men vissa projekt behöver ytterligare skärmstorlekar. Lägg till anpassade brytpunkter i theme.extend.screens för att få nya responsiva prefix. Du kan lägga till mindre brytpunkter under sm eller större brytpunkter över 2xl. Alla responsiva verktygsklasser får automatiskt ditt nya prefix utan ytterligare konfiguration.
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'xs': '475px', // xs:flex, xs:text-lg...
'3xl': '1920px', // 3xl:grid-cols-6...
'tall': { 'raw': '(min-height: 800px)' }, // height-based
},
},
},
};Referera till temavärden i konfigurationen
Ibland vill du referera till ett annat temavärde när du definierar ett nytt värde – till exempel härleda en skuggfärg från din profilfärg. Tailwind tillhandahåller hjälpfunktionen theme(), som du kan använda i konfigurationen för att referera till valfritt temavärde via dess sökväg. Använd den som en funktion som tar theme-resolvern som argument.
// tailwind.config.js
module.exports = {
theme: {
extend: {
boxShadow: {
// Reference brand color in a shadow definition
'brand': (theme) => '0 4px 14px 0 ' + theme('colors.brand.500') + '40',
},
// Or use the CSS theme() function syntax
colors: {
'card-bg': 'rgb(var(--color-card-bg) / <alpha-value>)',
},
},
},
};Åsidosätt standardfärgpaletten på ett säkert sätt
Om du bara vill använda dina anpassade färger men fortfarande vill använda Tailwinds verktygsklassgenerator, åsidosätter du theme.colors samtidigt som du uttryckligen importerar kategorierna du fortfarande vill ha kvar. Använd Tailwinds colors-export för att återinföra specifika färggrupper och ta bort de övriga. På så sätt får du en anpassad palett utan att behöva definiera om varje färgnyans manuellt.
const colors = require('tailwindcss/colors');
module.exports = {
theme: {
colors: {
// Keep these from the default palette
transparent: 'transparent',
current: 'currentColor',
white: colors.white,
black: colors.black,
gray: colors.slate, // rename slate to gray
// Add your own
brand: {
500: '#6366f1',
600: '#4f46e5',
},
},
},
};Identifiera oavsiktliga åsidosättningar
Det är lätt att råka införa åsidosättningar och svårt att felsöka dem – du lägger till ett värde och plötsligt slutar andra verktygsklasser att fungera. Symptomet är att klasser som tidigare fungerade inte längre ger någon CSS i webbläsaren. Inspektera den genererade CSS-koden för att se om de förväntade verktygsklasserna finns med. Om bg-blue-500 saknas i resultatet bör du kontrollera om du av misstag placerade dina färger i theme.colors i stället för i theme.extend.colors.
// BUG: This accidentally overrides ALL colors
module.exports = {
theme: {
colors: { brand: '#6366f1' }, // bg-blue-500 gone!
},
};
// FIX: Use extend
module.exports = {
theme: {
extend: {
colors: { brand: '#6366f1' }, // bg-blue-500 still works!
},
},
};Snabbkontroll
Testa din förståelse av att utöka respektive åsidosätta Tailwind-temat.
Sammanfattning av lektionen
I den här lektionen har du lärt dig att theme.extend slår samman nya värden med Tailwinds standardvärden – ingenting försvinner, att direkta åsidosättningar av theme ersätter hela standardkategorin och därför bör användas medvetet, samt att du kan referera till befintliga temavärden med funktionen theme() i konfigurationen. Härnäst lägger vi till officiella Tailwind-plugins för att utöka projektet.
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 ”Utöka eller ersätta temat” gratis?
Ja – hela texten till ”Utöka eller ersätta temat” 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 ”Utöka eller ersätta temat”?
Använd theme.extend för att lägga till nya värden bredvid standardvärdena, jämfört med theme för att helt ersätta standardvärdena, med praktiska exempel på båda metoderna. 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 3 av 4.
Hur lång tid tar lektionen ”Utöka eller ersätta temat”?
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
- Anatomin hos tailwind.config.js
- Innehållssökvägar och rensning
- Utöka eller ersätta temat
- Lägga till och konfigurera plugins