Tailwind-värit: paletin käyttö ja laajentaminen

Tailwind-värit ovat joukko nimettyjä perheitä redistä roseen sekä harmaita, kuten slate, gray, zinc, neutral ja stone. Jokaisessa on yksitoista sävyä: 50, sadan välein 100:sta 900:aan sekä 950. Käytät niitä apuluokilla, kuten bg-blue-600, text-slate-900 ja border-rose-300. Tailwind v4:ssä koko paletti määritellään OKLCH-muotoisina CSS-muuttujina, joita laajennat tai korvaat @theme-lohkossa JavaScript-asetustiedoston sijaan.

Miten oletuspaletti rakentuu

Jokainen perhe noudattaa samaa asteikkoa. Arvot 50:stä 200:aan ovat vaaleita sävyjä taustoihin ja osoittimen alla näkyviin täyttöihin. 300 ja 400 ovat pehmeitä tehosteita, 500 ja 600 kylläinen keskialue ja 700:sta 950:een sopivat tekstiin, reunuksiin ja tummiin pintoihin. Koska perheissä on samat portaat, blue-arvon vaihtaminen komponentissa violet-arvoksi yleensä toimii suoraan.

Valitse yksi harmaa ja pysy siinä. gray-500-tekstin ja slate-200-reunusten yhdistäminen tuottaa hieman likaisen vaikutelman, jota on vaikea nimetä mutta helppo välttää.

Tailwind-värien käyttö merkintäkielessä

Väriapuluokkia on lähes jokaiselle väriä käyttävälle ominaisuudelle: bg-*, text-*, border-*, ring-*, fill-*, stroke-*, decoration-*, shadow-*, accent-*, caret-* sekä liukuvärin pisteet from-*, via-* ja to-*. Lisää kauttaviiva ja luku peittävyyden asettamiseksi.

<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>

v4:ssä jokainen sävy on myös muuttuja, jota voit käyttää tavallisessa CSS:ssä: color: var(--color-slate-400). Sillä on helppo tyylitellä kolmansien osapuolten pienoisohjelmia, SVG:tä tai canvasia samoilla väreillä kuin apuluokkasi.

Omien värien lisääminen Tailwind v4:ään

v4:ssä teema määritellään CSS:llä. Jokainen @theme-lohkon --color--alkuinen muuttuja muuttuu väriksi, jolle luodaan kaikki apuluokat. Nimeä värit tehtävän tai brändin mukaan ja anna niille täysi asteikko, jos tarvitset vaaleita sävyjä.

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

Asteikon rakentaminen OKLCH:lla saa tämän toimimaan. OKLCH:n vaaleus vastaa sitä, kuinka kirkkaalta väri näyttää. Siksi yhtä suuret askeleet näyttävät yhtä suurilta, mitä HSL ei voi luvata. OKLCH selitettynä syventää aihetta, ja oklch.com sopii arvojen kokeiluun.

Koko paletin korvaaminen

Poista oletukset ja säilytä vain omat värisi nollaamalla nimiavaruus ensin rivillä --color-*: initial; @theme-lohkon alussa. Silloin bg-blue-500-tyyppiset apuluokat lakkaavat olemasta, mikä on hyödyllinen suojakeino tiukkaa brändiä noudattavassa projektissa.

Omat värit Tailwind v3:ssa

Vanhemmat projektit määrittelevät värit yhä JavaScriptillä. Lisää värejä oletusten rinnalle extend-avaimella tai korvaa oletukset määrittämällä colors suoraan.

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

Kontrasti: mitkä sävyt sopivat tekstiin

Sävynumerot eivät ole kontrastiasteikko. Valkoinen teksti blue-600-taustalla täyttää WCAG:n leipätekstiltä vaatiman 4,5:1-suhteen, valkoinen blue-500-taustalla ei. Tarkista todellinen pari alla olevilla suhteilla tai WebAIMin työkalulla. Säännöt löydät artikkelista värikontrasti ja saavutettavuus.

Tee paletista omasi

Oletuspalettia käytetään valtavalla määrällä sivustoja. Siksi niin monessa tuotteessa on sama indigo-600-painike ja slate-50-tausta. Tämä samankaltaisuus on verkkoversio ilmiöstä miksi jokainen syöte näyttää samalta.

1. 1

   Valitse sävykulma

   Aloita brändiväristäsi ja lue sen sävykulma OKLCH:ssa. Verkkosivun värimaailmat auttaa, jos sinulla ei vielä ole sellaista.

2. 2

   Rakenna asteikko

   Pidä sävykulma samana, porrasta vaaleus noin 97%:sta 22%:iin ja laske värikylläisyyttä molemmissa päissä.

3. 3

   Nimeä myös tehtävät

   Lisää --color-ink, --color-paper ja vastaavia, jotta komponentit kertovat, mihin väriä käytetään.

4. 4

   Pidä yksi lähde

   Käsittele @theme-lohkoa design-tokeneinasi ja käytä samoja arvoja grafiikassasi.

Viimeisessä vaiheessa brändi yleensä alkaa hajota: sivusto saa uuden asteikon, mutta somejulkaisut ja diat säilyttävät viime vuoden värit. Gradientlyn brändipaketti tallentaa palettisi fonttien ja logojen rinnalle, joten Designer asettelee julkaisut samoilla väreillä kuin Tailwind-teemasi. Mark antaa brändille liukuväri-ilmeen, jota mikään muu sivusto ei jaa.