# Tailwind-liukuväriteksti: luokat, v4-syntaksi ja korjaukset

[Canonical HTML page](https://gradiently.design/fi/guide/tailwind-gradient-text)

Neljä apuluokkaa muuttaa otsikon liukuväritekstiksi. Niiden yksityiskohdat ratkaisevat, näyttääkö se terävältä vai leikkautuneelta. Tässä Tailwind v4:n ja v3:n luokat ja vastaan tulevat ongelmat.

## The short version

- Tailwind-liukuväriteksti tarvitsee liukuväritaustan, kirjaimiin rajaavan `bg-clip-text`-luokan ja `text-transparent`-luokan, jotta tausta näkyy läpi.
- Tailwind v4:ssä liukuväriapuluokka on `bg-linear-to-r`, v3:ssa `bg-gradient-to-r`. from-, via- ja to-väriluokat toimivat molemmissa samoin.
- Tailwind v4 sallii interpolointiavaruuden valinnan muokkaimella, kuten `bg-linear-to-r/oklch`, joka pitää liukuvärin keskikohdan kirkkaana.
- Lisää `box-decoration-clone`, kun liukuväriotsikko rivittyy, ja hieman alareunan sisäistä välistystä, kun alapidennykset leikkautuvat.
- Tarkista liukuvärin vaaleimman värin kontrasti sivua vasten, sillä siinä liukuväriteksti muuttuu vaikealukuiseksi.

Kun haluat tehdä **Tailwind-liukuväritekstin**, aseta elementtiin liukuväri ja rajaa se kirjaimiin: `bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent`. Alkuosa maalaa liukuväritaustan, `bg-clip-text` leikkaa taustan kirjainmuotoihin ja `text-transparent` poistaa tasaisen tekstivärin, jotta liukuväri näkyy läpi. Kirjoita Tailwind v3:ssa `bg-gradient-to-r` luokan `bg-linear-to-r` sijaan. Muu on samaa.

```html
<h1 class="bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-5xl font-bold text-transparent">
  Ship the quiet version
</h1>
```

Koko tehoste yhdessä luokkalistassa. Järjestyksellä class-attribuutin sisällä ei ole merkitystä.

## Miten luokat toimivat yhdessä

On hyödyllistä tietää, miksi kukin apuluokka kääntyy, sillä jokainen liukuväritekstin virhe johtuu jonkin neljästä osasta puuttumisesta. Taustalla on sama tekniikka kuin tavallisessa [CSS-liukuväritekstissä](https://gradiently.design/fi/guide/css-gradient-text): `background-clip: text` ja läpinäkyvä täyttö.

| Apuluokka | Mitä se asettaa | Jos unohdat sen |
| --- | --- | --- |
| `bg-linear-to-r` | Lineaarinen liukuväri oikealle | Ei liukuväriä lainkaan |
| `from-*` `via-*` `to-*` | Väripisteet | Läpinäkyvät tai oletusarvoiset pisteet |
| `bg-clip-text` | `background-clip: text` | Värillinen laatikko tasavärisen tekstin takana |
| `text-transparent` | `color: transparent` | Tasavärinen teksti peittää liukuvärin |

Tailwind-liukuväritekstin neljä osaa ja kunkin puuttumisesta syntyvä oire.

Suunnat noudattavat tuttuja päätteitä: `-to-r`, `-to-br`, `-to-b` ja niin edelleen. Versio 4 hyväksyy myös kulman, kuten `bg-linear-45` tai `bg-linear-135`, ja lisää `bg-radial`- ja `bg-conic`-luokat, jotka toimivat myös tekstissä. Jos liukuväriapuluokat ovat uusia, [Tailwind-liukuvärit](https://gradiently.design/fi/guide/tailwind-gradient) käsittelee taustoja perusteellisesti.

## Tailwind v4:n ja v3:n luokkanimet

v4:n suurin muutos on lineaarisen apuluokan nimi. `bg-gradient-to-r` muuttui muotoon `bg-linear-to-r` uusien säteittäisten ja kartiomaisten apuluokkien rinnalle. Vanha nimi kääntyy yhä v4:ssä yhteensopivuuden vuoksi, mutta uudessa koodissa kannattaa käyttää uutta.

| Tavoite | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| Vasemmalta oikealle | `bg-linear-to-r` | `bg-gradient-to-r` |
| Vinottain | `bg-linear-to-br` tai `bg-linear-45` | `bg-gradient-to-br` |
| Säteittäinen | `bg-radial` | Vain itse määritelty arvo |
| Kartiomainen | `bg-conic` | Vain itse määritelty arvo |
| OKLCH-sekoitus | `bg-linear-to-r/oklch` | Ei käytettävissä |
| Rajaus tekstiin | `bg-clip-text` | `bg-clip-text` |

Rinnakkainen vertailu auttaa tunnistamaan, mille versiolle verkosta löytämäsi koodikatkelma on kirjoitettu.

## Kopioitavat liukuväritekstiesimerkit

Kolme tai neljä väriympyrässä lähekkäistä väriä tuottavat puhtaimman liukuväritekstin. Vastavärit näyttävät räikeiltä ja voivat muuttua keskeltä harmaiksi. Näissä yhdistelmissä käytetään oletuspaletin värejä, joita käsittelee [Tailwind-värit](https://gradiently.design/fi/guide/tailwind-colors).

- violet-600 / pink-600: `linear-gradient(90deg, #7c3aed 0%, #db2777 100%)`
- cyan-600 / blue-600 / violet-600: `linear-gradient(90deg, #0891b2 0%, #2563eb 50%, #7c3aed 100%)`
- orange-600 / rose-600: `linear-gradient(90deg, #ea580c 0%, #e11d48 100%)`
- emerald-600 / teal-600 / cyan-600: `linear-gradient(90deg, #059669 0%, #0d9488 50%, #0891b2 100%)`
- amber-500 / orange-500 / pink-600: `linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #db2777 100%)`
- slate-800 / slate-500: `linear-gradient(90deg, #1e293b 0%, #64748b 100%)`

Kukin nimi luettelee pisteet järjestyksessä: ensimmäinen tulee `from-*`-luokkaan, keskimmäinen `via-*`-luokkaan ja viimeinen `to-*`-luokkaan. 600-sävyt säilyttävät riittävän kontrastin valkoisella sivulla. Vaihda tummalla sivulla arvoon 300 tai 400. Hex-arvot ovat v3-paletista, v4:n OKLCH-versiot näyttävät hyvin samankaltaisilta.

Pisteiden sijainnit siirtävät värien paikkoja. `from-20% via-50% to-80%` pitää pitkän otsikon molemmat päät tasavärisinä, mikä näyttää rauhallisemmalta kuin ensimmäisestä kirjaimesta alkava sekoitus.

```html
<!-- Stop positions -->
<h2 class="bg-linear-to-r from-cyan-600 from-20% via-blue-600 via-50% to-violet-600 to-80% bg-clip-text text-transparent">
  Plans for every team
</h2>

<!-- OKLCH interpolation keeps the middle bright -->
<h2 class="bg-linear-to-r/oklch from-blue-600 to-yellow-400 bg-clip-text text-transparent">
  Brighter in the middle
</h2>

<!-- Arbitrary gradient, underscores stand in for spaces -->
<h2 class="bg-[linear-gradient(100deg,#1e1b4b_0%,#7c3aed_60%,#f472b6_100%)] bg-clip-text text-transparent">
  Exactly your colours
</h2>
```

Pisteiden sijainnit, interpolointimuokkain ja täysin oma liukuväri. Itse määritellyt arvot toimivat v3:ssa ja v4:ssä.

Sinisestä keltaiseen kulkeva liukuväri on hyvä interpolointitesti. sRGB:ssä se kulkee harmahtavan vihreän kautta, OKLCH:ssa se pysyy elävänä. [CSS-liukuvärit OKLCH:ssa](https://gradiently.design/fi/guide/css-gradient-oklch) selittää syyn.

## Tavallisten liukuväritekstiongelmien korjaaminen

### Moniriviset otsikot

Oletuksena liukuväri ulottuu koko elementtilaatikkoon. Rivittyvä otsikko saa siis yhden venytetyn liukuvärin, jonka toisella rivillä on eri väri kuin ensimmäisellä. Lisää `box-decoration-clone`, jotta jokainen rivi saa oman kokonaisen liukuvärinsä, tai `inline-block`, jotta laatikko kutistuu tekstin kokoiseksi.

### Leikkautuvat alapidennykset

Tiukka riviväli, kuten `leading-none`, voi leikata g:n tai y:n alaosan, koska tausta päättyy rivilaatikkoon. Lisää `pb-1` tai väljennä riviväliä hieman.

### Tumma tila

Valkoiselle paperille säädetty liukuväri näyttää samealta tummalla sivulla. Anna sille omat sävyt varianteilla: `from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300`. Sama ajatus koskee taustoja, joita käsittelee [tumman tilan liukuvärit](https://gradiently.design/fi/guide/dark-mode-gradients).

### Vältä

- Liukuväriteksti pitkissä kappaleissa
- Vaalea väripiste, joka katoaa valkoiselle
- Vastavärit, joiden keskelle tulee harmaata
- Liukuväriteksti liukuväritaustalla
- Tasaisen värin puuttuminen valitusta tekstistä

### Tee näin

- Käytä vain otsikossa tai yksittäisessä sanassa
- Tarkista vaalein piste sivua vasten
- Läheiset sävykulmat tai OKLCH-interpolointi
- Tasavärinen pohja liukuvärisanojen takana
- Aseta `selection:text-white selection:bg-violet-600`

## Tailwind-liukuväritekstin animointi

Hidas hohde syntyy tekstiä kaksi kertaa leveämmästä taustasta, joka liukuu sivuttain. Määrittele v4:ssä animaatio `@theme`-lohkon sisällä, niin siitä tulee `animate-*`-apuluokka.

```css
@import "tailwindcss";

@theme {
  --animate-shine: shine 6s linear infinite;

  @keyframes shine {
    to { background-position: 200% center; }
  }
}
```

Lisää sitten otsikkoon `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` ja toista ensimmäinen väri viimeisenä pisteenä, jotta silmukka ei hypähdä.

Käytä tätä enintään kerran sivulla. Liike vetää katseen puoleensa, mikä on julkaisuotsikossa tarkoitus ja muualla häiriö. Sama malli esiintyy artikkelissa [animoidut CSS-liukuvärit](https://gradiently.design/fi/guide/css-animated-gradient).

## Pidä liukuväriteksti luettavana

1. **Etsi heikoin piste** Vaalein väri vaalealla sivulla tai tummin tummalla sivulla määrittää todellisen kontrastin.
2. **Testaa kuten leipätekstiä** Suuret lihavoidut otsikot tarvitsevat WCAG:n mukaan vähintään 3:1-kontrastin sivua vasten. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) sisältää täydet säännöt.
3. **Käytä vahvaa leikkausta** Liukuvärit erottuvat paremmin lihavissa ja paksuissa leikkauksissa, joissa on enemmän täyttöä värin näyttämiseen.
4. **Pysähdy muutamaan sanaan** Yksi otsikko tai yksi korostettu sana. Pidempi teksti alkaa näyttää renderöintivirheeltä.

Liukuväriteksti on verkkotekniikka. Kun tehtävänä on somejulkaisu tai banneri ja haluat liukuvärin sanojen taakse, Gradientlyn Markit siirtävät rauhallisimman alueensa tekstin taakse ja valitsevat vaalean tai tumman musteen riveittäin. Sanat erottuvat ilman jokaisen väripisteen testaamista.

## FAQ

### Miten teen liukuväritekstin Tailwindilla?

Lisää liukuväri luokalla `bg-linear-to-r` (v3:ssa `bg-gradient-to-r`), väripisteet luokilla `from-*` ja `to-*` sekä lopuksi `bg-clip-text` ja `text-transparent`.

### Miksi Tailwind-liukuväritekstini ei näy?

Yleensä `text-transparent` puuttuu, jolloin tasavärinen teksti peittää liukuvärin, tai `bg-clip-text` puuttuu, jolloin liukuväri täyttää laatikon sanojen takana. Tarkista, että kaikki neljä osaa ovat samassa elementissä.

### Mikä korvasi bg-gradient-to-r-luokan Tailwind v4:ssä?

Lineaarinen apuluokka on nyt `bg-linear-to-r`. Vanha nimi toimii yhä yhteensopivuuden vuoksi. v4 lisää `bg-radial`-, `bg-conic`- ja kulmaluokat, kuten `bg-linear-45`.

### Miten estän liukuväritekstiä leikkaamasta g:n ja y:n kaltaisia kirjaimia?

Lisää hieman alareunan sisäistä välistystä, kuten `pb-1`, tai väljennä rivikorkeutta, sillä rajattu tausta päättyy rivilaatikkoon.

### Onko liukuväriteksti saavutettavaa?

Voi olla, jos liukuvärin jokainen osa täyttää kontrastivaatimukset sivua vasten. Testaa vaalein väripiste ja käytä liukuväritekstiä vain otsikoissa.