Tailwind gradienttext: klasser, v4-syntax och lösningar

För att göra gradienttext i Tailwind lägger du en gradient på elementet och klipper den till bokstäverna: bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent. Den första delen målar en gradientbakgrund, bg-clip-text trimmar bakgrunden till glyfernas form och text-transparent tar bort den solida textfärgen så att gradienten syns igenom. I Tailwind v3 skriver du bg-gradient-to-r i stället för bg-linear-to-r, resten är identiskt.

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

Så fungerar klasserna tillsammans

Det hjälper att veta vad varje klass kompileras till, eftersom varje fel med gradienttext beror på att en av de fyra delarna saknas. Under huven är det samma teknik som i vanlig gradienttext med CSS: background-clip: text med transparent fyllning.

Riktningarna följer de vanliga ändelserna: -to-r, -to-br, -to-b och så vidare. Version 4 godtar också en vinkel, till exempel bg-linear-45 eller bg-linear-135, och lägger till bg-radial och bg-conic, som också fungerar för text. Om du inte har använt gradientklasserna mycket går Tailwind-gradienter igenom bakgrunder på djupet.

Klassnamn i Tailwind v4 och v3

Den största ändringen i v4 är namnet på den linjära klassen. bg-gradient-to-r blev bg-linear-to-r, för att passa ihop med de nya radiella och koniska klasserna. Det gamla namnet kompileras fortfarande i v4 av kompatibilitetsskäl, men ny kod bör använda det nya.

Exempel på gradienttext som du kan kopiera

Tre eller fyra färger som ligger nära varandra på hjulet ger den renaste gradienttexten. Motsatser ser starka ut och kan bli grå i mitten. De här kombinationerna använder färger från standardpaletten, som beskrivs i Tailwind-färger.

Stopppositioner flyttar var varje färg ligger. from-20% via-50% to-80% behåller solid färg i båda ändar av en lång rubrik, vilket ser lugnare ut än en blandning som börjar på första bokstaven.

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

Blått till gult är ett bra test av interpolation. Blandat i sRGB passerar det en grönaktig grå, blandat i OKLCH förblir det levande. CSS-gradienter i OKLCH förklarar varför.

Lösningar på vanliga problem med gradienttext

Rubriker över flera rader

Som standard sträcker sig gradienten över hela elementets ruta, så en rubrik som bryts får en utdragen gradient där andra raden har en annan färg än den första. Lägg till box-decoration-clone så får varje rad sin egen hela gradient, eller inline-block för att krympa rutan till texten.

Avklippta nedstaplar

Tät radhöjd som leading-none kan skära av nederdelen på ett g eller y, eftersom bakgrunden slutar vid radrutan. Lägg till pb-1 eller öka radhöjden något.

Mörkt läge

En gradient som är justerad för vitt papper ser grumlig ut på en mörk sida. Ge den egna nyanser med varianter: from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300. Samma tänkande gäller bakgrunder, som tas upp i gradienter i mörkt läge.

Animera gradienttext i Tailwind

Ett långsamt skimmer kommer från en bakgrund som är dubbelt så bred som texten och glider i sidled. I v4 definierar du animationen i @theme och den blir en animate-*-klass.

@import "tailwindcss";

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

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

Använd det högst en gång på en sida. Rörelse drar blicken till sig, vilket är poängen för en lanseringsrubrik och ett störmoment överallt annars. Mönstret är detsamma som i animerade CSS-gradienter.

Håll gradienttexten läsbar

1. 1

   Hitta det svagaste stoppet

   Den ljusaste färgen på en ljus sida, eller den mörkaste på en mörk, avgör den kontrast du faktiskt får.

2. 2

   Testa den som brödtext

   Stora feta rubriker behöver minst 3:1 mot sidan enligt WCAG. Färgkontrast och tillgänglighet har alla regler.

3. 3

   Använd tjocklek

   Gradienter läses bättre i fetare snitt, där det finns mer yta att visa färgen på.

4. 4

   Stanna vid några få ord

   En rubrik eller ett betonat ord. Allt längre börjar se ut som ett renderingsfel.

Gradienttext är en webbteknik. När jobbet är ett inlägg i sociala medier eller en banner och du vill ha gradienten bakom orden i stället flyttar Marks från Gradiently sin lugnaste yta bakom texten och väljer ljus eller mörk färg rad för rad, så att orden går att läsa utan att du testar varje stopp.