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

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.

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

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ä: background-clip: text ja läpinäkyvä täyttö.

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

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.

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.

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

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

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.

@import "tailwindcss";

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

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

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.

Pidä liukuväriteksti luettavana

1. 1

   Etsi heikoin piste

   Vaalein väri vaalealla sivulla tai tummin tummalla sivulla määrittää todellisen kontrastin.

2. 2

   Testaa kuten leipätekstiä

   Suuret lihavoidut otsikot tarvitsevat WCAG:n mukaan vähintään 3:1-kontrastin sivua vasten. Värikontrasti ja saavutettavuus sisältää täydet säännöt.

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