Gradienttekst i Tailwind: klasser, v4-syntaks og løsninger

Du laver gradienttekst i Tailwind ved at lægge en gradient på elementet og klippe den til bogstaverne: bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent. Første del maler en gradientbaggrund, bg-clip-text beskærer baggrunden til tegnenes form, og text-transparent fjerner den ensfarvede tekstfarve, så gradienten skinner igennem. I Tailwind v3 skriver du bg-gradient-to-r i stedet for bg-linear-to-r; resten er det samme.

<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ådan arbejder klasserne sammen

Det hjælper at vide, hvad hver utility kompileres til, for alle fejl med gradienttekst skyldes, at en af de fire dele mangler. Under motorhjelmen er det samme teknik som almindelig gradienttekst i CSS: background-clip: text med en gennemsigtig fyldfarve.

Retninger følger de sædvanlige endelser: -to-r, -to-br, -to-b og så videre. Version 4 accepterer også en vinkel som bg-linear-45 eller bg-linear-135 og tilføjer bg-radial og bg-conic, som også virker til tekst. Har du ikke brugt gradientutilities meget, gennemgår gradienter i Tailwind baggrunde i dybden.

Klassenavne i Tailwind v4 og v3

Den største ændring i v4 er navnet på den lineære utility. bg-gradient-to-r blev til bg-linear-to-r for at passe ind ved siden af de nye radiale og koniske utilities. Det gamle navn kompilerer stadig i v4 af hensyn til kompatibilitet, men ny kode bør bruge det nye.

Eksempler på gradienttekst, du kan kopiere

Tre eller fire farver, der ligger tæt på hinanden på farvehjulet, giver den reneste gradienttekst. Modsætninger virker højrøstede og kan blive grå på midten. Disse kombinationer bruger farver fra standardpaletten, som er beskrevet i Tailwind-farver.

Stoppositioner flytter, hvor hver farve sidder. from-20% via-50% to-80% holder ensfarvede ender på en lang overskrift, hvilket ser roligere ud end en blanding, der starter allerede på første bogstav.

<!-- 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å til gul er en god test af interpolation. Blandet i sRGB går den gennem en grålig grøn; blandet i OKLCH forbliver den klar. CSS-gradienter i OKLCH forklarer hvorfor.

Sådan løser du almindelige problemer med gradienttekst

Overskrifter over flere linjer

Som standard spænder gradienten over hele elementets boks, så en overskrift, der brydes, får én udstrakt gradient, hvor anden linje har en anden farve end første. Tilføj box-decoration-clone for at give hver linje sin egen fulde gradient, eller inline-block for at krympe boksen til teksten.

Afskårne underlængder

Stram linjeafstand som leading-none kan skære bunden af et g eller y, fordi baggrunden slutter ved linjeboksen. Tilføj pb-1, eller løsn linjeafstanden en smule.

Mørk tilstand

En gradient afstemt til hvidt papir ser mudret ud på en mørk side. Giv den sine egne nuancer med varianter: from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300. Samme tankegang gælder baggrunde, som gennemgås i gradienter til mørk tilstand.

Sådan animerer du gradienttekst i Tailwind

Et langsomt skær opstår, når en baggrund dobbelt så bred som teksten glider sidelæns. I v4 definerer du animationen inde i @theme, så bliver den til en animate-*-utility.

@import "tailwindcss";

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

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

Brug den højst én gang på en side. Bevægelse trækker blikket, hvilket er pointen ved en lanceringsoverskrift og en plage alle andre steder. Mønstret er det samme som i animerede CSS-gradienter.

Hold gradienttekst læsbar

1. 1

   Find det svageste stop

   Den lyseste farve på en lys side, eller den mørkeste på en mørk side, bestemmer den kontrast, du faktisk får.

2. 2

   Test den som brødtekst

   Store fede overskrifter skal have mindst 3:1 mod siden ifølge WCAG. Farvekontrast og tilgængelighed har alle reglerne.

3. 3

   Brug vægten

   Gradienter læses bedre i fede og tunge snit, hvor der er mere fyld til at vise farven.

4. 4

   Stop ved få ord

   Én overskrift eller ét fremhævet ord. Alt længere begynder at ligne en renderingsfejl.

Gradienttekst er en webteknik. Når opgaven er et opslag på sociale medier eller et banner, og du hellere vil have gradienten bag ordene, flytter Gradiently Marks deres roligste område bag teksten og vælger lyst eller mørkt blæk linje for linje, så ordene kan læses, uden at du skal teste hvert stop.