Tailwind-farger: bruk og utvid paletten

Tailwind-farger er et sett med navngitte familier, fra red til rose, og gråtoner som slate, gray, zinc, neutral og stone. Hver har elleve toner nummerert 50, 100 til 900 i hundrer og 950. Du bruker dem med hjelpeklasser som bg-blue-600, text-slate-900 og border-rose-300. I Tailwind v4 er hele paletten definert i OKLCH som CSS-variabler, som du utvider eller erstatter i en @theme-blokk fremfor en JavaScript-konfigurasjonsfil.

Slik er standardpaletten organisert

Hver familie følger samme trinn. 50 til 200 er lyse toner for bakgrunner og fyll når pekeren holdes over, 300 og 400 er myke aksenter, 500 og 600 er den mettede midten, og 700 til 950 brukes til tekst, kanter og mørke flater. Siden alle familier bruker samme trinn, fungerer det vanligvis fint å bytte blue med violet i en komponent.

Velg én gråfamilie og hold deg til den. Å blande gray-500-tekst med slate-200-kanter gir et svakt skittent uttrykk som er vanskelig å beskrive og enkelt å unngå.

Bruk Tailwind-farger i markeringen

Fargeklasser finnes for nesten alle egenskaper som tar en farge: bg-*, text-*, border-*, ring-*, fill-*, stroke-*, decoration-*, shadow-*, accent-*, caret-* og gradientstoppene from-*, via-* og to-*. Legg til skråstrek og et tall for å angi opasitet.

<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 tone også en variabel du kan bruke i vanlig CSS: color: var(--color-slate-400). Det gjør det enkelt å gi tredjepartswidgeter, SVG eller et lerret samme farger som hjelpeklassene.

Legg til egne farger i Tailwind v4

I v4 konfigurerer du temaet i CSS. Alle variabler som begynner med --color- inne i @theme, blir en farge med alle hjelpeklasser generert. Navngi farger etter rolle eller merkevare, og gi dem en hel toneskala hvis du trenger lyse varianter.

@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);
}

Skalaen i OKLCH er grunnen til at dette fungerer. Lyshet i OKLCH samsvarer med hvor lys en farge virker, så like trinn ser like ut, noe HSL ikke kan love. OKLCH forklart går dypere, og oklch.com er et godt sted å prøve verdier.

Erstatt hele paletten

For å fjerne standardfargene og beholde bare dine egne, nullstill navnerommet med --color-*: initial; øverst i @theme. Klasser som bg-blue-500 slutter da å finnes, noe som er en nyttig sperre i et prosjekt med strenge merkevareregler.

Egne farger i Tailwind v3

Eldre prosjekter konfigurerer fortsatt farger i JavaScript. Bruk extend for å legge farger ved siden av standardene, eller sett colors direkte for å erstatte dem.

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

Kontrast: hvilke toner er trygge for tekst

Tonenummer er ingen kontrastskala. Hvit tekst på blue-600 passerer kravet på 4,5:1 fra WCAG for brødtekst, mens hvitt på blue-500 ikke gjør det. Sjekk det faktiske paret med forholdstallene nedenfor eller et verktøy fra WebAIM, og les fargekontrast og tilgjengelighet for reglene.

Gjør paletten til din

Standardpaletten brukes på svært mange nettsteder. Derfor deler så mange produkter samme indigo-600-knapp og slate-50-bakgrunn. Likheten er nettversjonen av hvorfor alle bildestrømmer ser like ut.

1. 1

   Velg en kulør

   Start med merkevarefargen og les av kuløren i OKLCH. Fargepaletter for nettsteder hjelper hvis du ikke har en ennå.

2. 2

   Bygg toneskalaen

   Hold kuløren fast, senk lysheten fra omtrent 97 % til 22 %, og reduser kroma i begge ender.

3. 3

   Navngi også roller

   Legg til --color-ink, --color-paper og lignende, slik at komponentene sier hva fargen brukes til.

4. 4

   Behold én kilde

   Behandle @theme-blokken som designtokenene, og gjenbruk de samme verdiene i grafikken.

Det siste steget er der merkevarer ofte spriker: nettstedet får den nye skalaen mens sosiale innlegg og presentasjoner beholder fjorårets farger. Et merkevaresett i Gradiently lagrer paletter sammen med skrifter og logoer, så Designer setter opp innlegg i samme farger som Tailwind-temaet. En Mark gir merkevaren et gradientuttrykk ingen andre nettsteder deler.