Legge til egendefinerte farger
Definer merkevarefarger som CSS-variabler eller heksadesimale verdier i konfigurasjonen, utvid paletten med egendefinerte nyanser, og bruk dem med alle fargeverktøy.
Legge til egendefinerte farger 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 egendefinerte farger er viktige
Alle virkelige prosjekter har en merkevareidentitet med bestemte farger som ikke finnes i Tailwinds standardpalett. Når du legger merkevarefargene til i Tailwind-konfigurasjonen, får du tilgang til hele API-et for verktøyklasser for disse fargene – du kan bruke dem med bg-*, text-*, border-*, ring-*, shadow-* og alle andre fargeverktøy. De egendefinerte fargene fungerer også automatisk med opasitetsmodifikatorer og varianter for mørk modus.
Legge til en enkel egendefinert farge
Den enkleste måten å legge til en egendefinert farge på er å oppgi én heksadesimalverdi med et nøkkelnavn i theme.extend.colors. Tailwind genererer en verktøyklasse for akkurat denne fargen. Nøkkelen blir en del av klassenavnet: en nøkkel med verdien brand oppretter bg-brand, text-brand, border-brand og så videre. Farger med én verdi støtter ikke nyansesuffikser som brand-500.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: '#6366f1',
accent: '#f59e0b',
danger: '#ef4444',
},
},
},
};
<!-- Usage -->
<div class="bg-brand text-white">Brand background</div>
<span class="text-accent font-semibold">Accent text</span>Legge til en full nyanseskala
For farger som trenger variasjon – lysere og mørkere versjoner for hover-tilstander, bakgrunner og tekst – definerer du en full nyanseskala som et nestet objekt. Bruk Tailwinds standardnumre for nyanser (50, 100, 200, ... 900, 950). Da får du tilgang til verktøyklasser som bg-brand-100 for subtile bakgrunner, bg-brand-500 for hovedfargen og bg-brand-900 for mørke aksenter.
// 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',
},
},
},
},
};Generere fargenyanser automatisk
Det er tidkrevende å skrive ti heksadesimalverdier manuelt for hver merkevarefarge. Verktøy som uicolors.app, palettte.app eller Tailwind-teamets nettbaserte generator for fargenyanser tar én grunnfarge og lager en full skala fra 50 til 950 med jevne, visuelt balanserte graderinger. Mange designverktøy, som Figma, har også plugins som eksporterer fargepaletter direkte i Tailwind-konfigurasjonsformat.
// Generated from uicolors.app or similar tool
// Base color: #6366f1 (indigo brand)
colors: {
brand: {
'50': '#eef2ff',
'100': '#e0e7ff',
'200': '#c7d2fe',
'300': '#a5b4fc',
'400': '#818cf8',
'500': '#6366f1',
'600': '#4f46e5',
'700': '#4338ca',
'800': '#3730a3',
'900': '#312e81',
'950': '#1e1b4b'
}
}DEFAULT-nøkkelen
Inne i et objekt for en fargeskala kan du legge til en DEFAULT-nøkkel for å knytte den korte verktøyklassen (uten nyansenummer) til en bestemt nyanse. Hvis du for eksempel setter DEFAULT: '#6366f1', betyr det at bg-brand gjengis som nyanse 500. Dette er nyttig når designet ditt oftest bruker en bestemt primærnyanse, og du ønsker et kort klassenavn for den uten å gi avkall på hele skalaen.
// tailwind.config.js
colors: {
brand: {
DEFAULT: '#6366f1', // bg-brand = #6366f1 (same as brand-500)
light: '#818cf8', // bg-brand-light
dark: '#4338ca', // bg-brand-dark
50: '#eef2ff', // bg-brand-50
500: '#6366f1', // bg-brand-500 (same as DEFAULT)
900: '#312e81', // bg-brand-900
},
}Bruke CSS-variabler for farger
For farger som endres mens programmet kjører – for eksempel temafarger som brukeren bytter basert på egne preferanser – definerer du dem som egendefinerte CSS-egenskaper og refererer til disse variablene i Tailwind-konfigurasjonen. Bruk plassholderen <alpha-value> for å aktivere støtte for opasitetsmodifikatorer (bg-brand/50). Dette mønsteret er grunnlaget for designsystemer med flere temaer bygget på Tailwind.
/* In your CSS */
:root {
--color-brand: 99 102 241; /* RGB values for opacity support */
}
/* tailwind.config.js */
module.exports = {
theme: {
extend: {
colors: {
brand: 'rgb(var(--color-brand) / <alpha-value>)',
},
},
},
};
<!-- Now bg-brand/50 works correctly -->
<div class="bg-brand/50">50% opacity brand background</div>Referere til Tailwinds standardfarger
Noen ganger ønsker du å gi eksisterende Tailwind-farger nye navn eller aliaser – for eksempel å bruke primary som alias for indigo, slik at komponentene dine ikke blir avhengige av en bestemt merkevare. Importer Tailwinds fargeobjekt og bruk det i konfigurasjonen for å referere til innebygde farger ved navn. Dette holder paletten din DRY: Endre aliaset én gang for å oppdatere alle komponentklassene som bruker primary.
const colors = require('tailwindcss/colors');
module.exports = {
theme: {
extend: {
colors: {
primary: colors.indigo, // bg-primary-500 = bg-indigo-500
secondary: colors.violet, // bg-secondary-500 = bg-violet-500
neutral: colors.slate, // text-neutral-700 = text-slate-700
},
},
},
};Semantisk navngivning av farger
I stedet for å navngi farger etter fargetone (indigo, violet) kan du navngi dem etter deres semantiske rolle i designet (primary, secondary, success, warning, error). Semantisk navngivning gjør komponentene robuste ved endringer av merkevaren: Hvis merkevarefargen endres fra indigo til teal, oppdaterer du én oppføring i konfigurasjonen, og alle komponentene gjenspeiler endringen automatisk.
// Semantic color system
module.exports = {
theme: {
extend: {
colors: {
primary: { 50: '#eef2ff', 500: '#6366f1', 900: '#312e81' },
secondary: { 50: '#f5f3ff', 500: '#8b5cf6', 900: '#2e1065' },
success: { 50: '#f0fdf4', 500: '#22c55e', 900: '#052e16' },
warning: { 50: '#fffbeb', 500: '#f59e0b', 900: '#451a03' },
error: { 50: '#fef2f2', 500: '#ef4444', 900: '#450a0a' },
},
},
},
};Bruke egendefinerte farger i mørk modus
Egendefinerte farger fungerer med varianter for mørk modus på samme måte som innebygde farger. Kombiner egendefinerte farger i lyse nyanser for lys modus med varianter i mørke nyanser for mørk modus. Hvis du bruker CSS-variabler for fargene, kan du endre variabelverdien i .dark-selektoren, og alle verktøyklassene som refererer til variabelen, oppdateres automatisk – ingen ekstra dark:-klasser er nødvendig.
<!-- Custom color with dark mode -->
<div class="bg-brand-50 dark:bg-brand-950 text-brand-900 dark:text-brand-100 p-6 rounded-xl">
<h2 class="text-brand-700 dark:text-brand-300 font-bold">Brand Card</h2>
<p class="text-brand-600 dark:text-brand-400">Content that adapts to dark mode</p>
</div>Opasitetsmodifikatorer med egendefinerte farger
Egendefinerte farger som er definert som heksadesimale verdier, støtter også Tailwinds syntaks for opasitetsmodifikatorer (bg-brand-500/75) når Tailwind kan konvertere heksverdien til en RGB-representasjon. Farger som er definert som CSS-variabler med plassholderen <alpha-value>, fungerer enda bedre og gir presis kontroll over opasiteten ved hvert brukssted uten behov for separate utility-klasser.
<!-- Opacity modifier with custom hex colors -->
<div class="bg-brand-500/20 border border-brand-500/30 text-brand-700">
Subtle brand-tinted background
</div>
<div class="shadow-brand-500/50 shadow-xl">
Brand-colored shadow
</div>
<button class="bg-brand-600 hover:bg-brand-600/90 text-white px-4 py-2 rounded-lg">
Slightly transparent on hover
</button>Teste egendefinerte farger i HTML
Etter at du har lagt til egendefinerte farger i konfigurasjonen, må du kontrollere at de fungerer ved å kjøre Tailwind-byggingen og bruke klassene i HTML-en. Sjekk både den genererte CSS-filen (klassene skal vises der) og det visuelle resultatet i nettleseren. Test også varianter for mørk modus, opasitetsmodifikatorer og hover-tilstander for å sikre at hele settet med avledede utility-klasser fungerer riktig med de egendefinerte fargene.
<!-- Test all derivative utilities work -->
<div class="p-4 space-y-2">
<div class="bg-brand-100 text-brand-900 p-2 rounded">bg-brand-100</div>
<div class="bg-brand-500 text-white p-2 rounded">bg-brand-500</div>
<div class="bg-brand-900 text-brand-100 p-2 rounded">bg-brand-900</div>
<div class="bg-brand-500/50 text-brand-900 p-2 rounded">bg-brand-500/50 (opacity)</div>
<div class="border-2 border-brand-500 text-brand-700 p-2 rounded">border-brand-500</div>
</div>Kort kontroll
Test hvor godt du har forstått hvordan du legger til egendefinerte farger i Tailwind CSS.
Oppsummering av leksjonen
I denne leksjonen lærte du å legge til egendefinerte farger i theme.extend.colors som enkeltstående heksverdier eller komplette nyanseskalaer, bruke semantiske navn som primary og error i stedet for navn på fargetoner for å få et mer robust design, og definere farger som CSS-variabler med <alpha-value> for støtte for opasitetsmodifikatorer. Neste gang legger vi til egendefinerte skrifttypefamilier fra Google Fonts og lokale kilder.
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 farger» gratis?
Ja – hele teksten i «Legge til egendefinerte farger» 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 farger»?
Definer merkevarefarger som CSS-variabler eller heksadesimale verdier i konfigurasjonen, utvid paletten med egendefinerte nyanser, og bruk dem med alle fargeverktøy. 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 «Legge til egendefinerte farger»?
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
- Legge til egendefinerte farger
- Egendefinerte skriftfamilier
- Egendefinerte avstandsverdier
- Bruke CSS-variabler i Tailwind