Tailwind-farver: sådan bruger og udvider du paletten

Tailwind-farver er et sæt navngivne familier fra red til rose plus en række grå som slate, gray, zinc, neutral og stone, hver med elleve nuancer nummereret 50, 100 til 900 i hundreder og 950. Du bruger dem med utilities som bg-blue-600, text-slate-900 og border-rose-300. I Tailwind v4 er hele paletten defineret i OKLCH som CSS-variabler, som du udvider eller erstatter i en @theme-blok i stedet for en JavaScript-konfigurationsfil.

Sådan er standardpaletten organiseret

Hver familie følger den samme trappe. 50 til 200 er lyse toner til baggrunde og hover-flader, 300 og 400 er bløde accenter, 500 og 600 er den mættede midte, og 700 til 950 er til tekst, kanter og mørke flader. Fordi alle familier bruger de samme trin, virker det som regel bare at bytte blue ud med violet i en komponent.

Vælg én grå, og hold dig til den. Blander du tekst i gray-500 med kanter i slate-200, får du et svagt beskidt udtryk, der er svært at sætte navn på og nemt at undgå.

Sådan bruger du Tailwind-farver i din markup

Der findes farveutilities til næsten alle egenskaber, der tager en farve: bg-*, text-*, border-*, ring-*, fill-*, stroke-*, decoration-*, shadow-*, accent-*, caret-* og gradientstoppene from-*, via-* og to-*. Tilføj en skråstreg og et tal for at sætte opaciteten.

<div class="rounded-xl bg-slate-900 p-6 text-slate-100">
  <p class="text-sm text-slate-400">Status</p>
  <p class="text-2xl font-semibold">All systems normal</p>
  <span class="mt-4 inline-flex rounded-full bg-emerald-500/15 px-3 py-1 text-emerald-300">
    Live
  </span>
</div>

<!-- One off values when nothing in the palette fits -->
<button class="bg-[#0b5c4a] text-[oklch(97%_0.02_160)]">Book a table</button>

I v4 er hver nuance også en variabel, du kan bruge i almindelig CSS: color: var(--color-slate-400). Det gør det nemt at style widgets fra tredjepart, SVG eller et canvas med de samme farver som dine utilities.

Sådan tilføjer du egne farver i Tailwind v4

I v4 konfigurerer du temaet i CSS. Enhver variabel, der starter med --color- inde i @theme, bliver til en farve med alle utilities genereret. Navngiv farver efter rolle eller brand, og giv dem en fuld trappe, hvis du får brug for lyse toner.

@import "tailwindcss";

@theme {
  /* A brand ramp on one hue, written in OKLCH */
  --color-ember-50: oklch(97% 0.02 45);
  --color-ember-100: oklch(94% 0.04 45);
  --color-ember-200: oklch(88% 0.07 45);
  --color-ember-300: oklch(80% 0.11 45);
  --color-ember-400: oklch(71% 0.15 45);
  --color-ember-500: oklch(63% 0.17 45);
  --color-ember-600: oklch(55% 0.16 45);
  --color-ember-700: oklch(47% 0.14 45);
  --color-ember-800: oklch(39% 0.11 45);
  --color-ember-900: oklch(31% 0.08 45);
  --color-ember-950: oklch(22% 0.05 45);

  /* Single role colours */
  --color-ink: oklch(18% 0.02 270);
  --color-paper: oklch(98% 0.01 85);
}

At bygge trappen i OKLCH er grunden til, at det virker. Lysheden i OKLCH svarer til, hvor lys en farve ser ud, så lige store trin ser lige store ud, hvilket HSL ikke kan love. OKLCH forklaret går mere i dybden, og oklch.com er et godt sted at afprøve værdier.

Sådan erstatter du hele paletten

Vil du fjerne standardfarverne og kun beholde dine egne, så nulstil først navnerummet med --color-*: initial; øverst i @theme. Utilities som bg-blue-500 holder så op med at eksistere, hvilket er et nyttigt værn i et projekt med et stramt brand.

Egne farver i Tailwind v3

Ældre projekter konfigurerer stadig farver i JavaScript. Brug extend til at tilføje farver ved siden af standardfarverne, eller sæt colors direkte for at erstatte dem.

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        ember: {
          50: '#fff1ea',
          500: '#d95f19',
          900: '#502007',
        },
        ink: '#14121f',
      },
    },
  },
}

Kontrast: hvilke nuancer er sikre til tekst

Nuancenumre er ikke en kontrastskala. Hvid tekst på blue-600 klarer de 4,5:1, som WCAG kræver til brødtekst, mens hvid på blue-500 ikke gør. Tjek det konkrete par med forholdstallene nedenfor eller et værktøj fra WebAIM, og læs farvekontrast og tilgængelighed for reglerne.

Gør paletten til din egen

Standardpaletten bruges på et enormt antal sites, og derfor deler så mange produkter den samme indigo-600-knap og slate-50-baggrund. Den ensartethed er webudgaven af hvorfor alle feeds ligner hinanden.

1. 1

   Vælg en farvetone

   Start med din brandfarve, og aflæs dens farvetone i OKLCH. Farveskemaer til websites hjælper, hvis du ikke har en endnu.

2. 2

   Byg trappen

   Hold farvetonen, træd lysheden fra omkring 97 % ned til 22 %, og sænk chroma i begge ender.

3. 3

   Navngiv også roller

   Tilføj --color-ink, --color-paper og lignende, så komponenterne siger, hvad en farve er til.

4. 4

   Hold én kilde

   Behandl @theme-blokken som dine design tokens, og genbrug de samme værdier i din grafik.

Det sidste trin er der, hvor brands typisk glider: sitet får den nye trappe, mens opslag på sociale medier og slides beholder sidste års farver. Et brandkit i Gradiently gemmer dine paletter sammen med dine skrifttyper og logoer, så Designer opsætter opslag i de samme farver, som dit Tailwind-tema bruger, og en Mark giver brandet et gradientlook, som intet andet site deler.