Tekstfarve og opacitet
Anvend Tailwinds tekstfarve-utilities fra farvepaletten, og justér opaciteten for at skabe hierarki og kontrast.
Tekstfarve og opacitet er en gratis Tailwind CSS Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Tailwind CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Tailwinds farvesystem
Tailwind leveres med en fyldig farvepalet: 22 farver som blue, indigo, red og green, hver med 11 nuancer fra 50 (næsten hvid) til 950 (næsten sort). Der er masser at arbejde med.
<!-- Tailwind color naming: {color}-{shade} -->
<p class="text-blue-500">Blue 500</p>
<p class="text-blue-700">Blue 700 (darker)</p>
<p class="text-blue-200">Blue 200 (lighter)</p>Anvendelse af tekstfarve
Farvelæg tekst med text-{color}-{shade}. Lave nuancer er lyse, mellemnuancer er klare, og høje nuancer er mørke. text-gray-700 er afdæmpet på hvid, mens text-gray-900 giver en markant kontrast.
<h1 class="text-gray-900">Main Heading</h1>
<h2 class="text-gray-700">Sub Heading</h2>
<p class="text-gray-600">Body text at a comfortable shade.</p>
<span class="text-gray-400">Metadata or secondary info</span>Brandfarver i tekst
Brug klare nuancer til at formidle betydning: text-blue-600 til links, text-red-600 til fejl og text-green-600 til succes. Disse konventioner føles straks velkendte for brugerne.
<a href="#" class="text-blue-600 hover:text-blue-800 underline">Link</a>
<p class="text-red-600">Error: Invalid email address.</p>
<p class="text-green-600">Success: Changes saved!</p>
<p class="text-yellow-700">Warning: Disk space is low.</p>Ændring af tekstens gennemsigtighed
Gør en farve mindre tydelig med skråstregsmodifikatoren: text-blue-600/50 viser blue med 50 % gennemsigtighed. Det er renere end gennemsigtighed på elementet, som også ville gøre dets underordnede elementer svagere.
<p class="text-gray-900/100">Fully opaque</p>
<p class="text-gray-900/75">75% opacity</p>
<p class="text-gray-900/50">50% opacity</p>
<p class="text-gray-900/25">25% opacity</p>Farvekontrast for tilgængelighed
Af hensyn til tilgængelighed skal tekst have tilstrækkelig kontrast — sigt efter et forhold på 4.5:1. Nuance 700 på hvid består som regel; undgå lyse nuancer fra 50 til 400 som tekst på hvid.
<!-- Accessible: dark text on light background -->
<p class="bg-white text-gray-800">Good contrast ratio (passes WCAG AA)</p>
<!-- Inaccessible: light text on white background -->
<p class="bg-white text-gray-300">Poor contrast (fails WCAG)</p>Tekstfarve på mørke baggrunde
På mørke baggrunde skal teksten være lys: text-white eller text-gray-100 til primær tekst og text-gray-400 til sekundær tekst. Det er kernen i et rent mørkt tema.
<div class="bg-gray-900 p-8 rounded-xl">
<h2 class="text-white font-bold text-2xl mb-2">Dark Card</h2>
<p class="text-gray-400 text-sm">Secondary text on dark background.</p>
<a href="#" class="text-indigo-400 hover:text-indigo-300">Learn more</a>
</div>Teksteffekt med farveovergang
Lav en effekt med farveovergang i tekst ved hjælp af bg-gradient-to-r from-* to-* samt bg-clip-text text-transparent. Farveovergangen vises kun gennem bogstaverne — meget moderne.
<h1 class="text-5xl font-extrabold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Gradient Headline
</h1>Farveændringer ved markering
Tilføj varianten hover: for at ændre tekstfarven, når du holder markøren over den — vigtigt for links og knapper. Brug transition-colors til en jævn overgang, og kombinér den med focus:.
<a href="#"
class="text-gray-600 hover:text-indigo-600 focus:text-indigo-600 transition-colors duration-200 font-medium">
Hover or focus me
</a>Semantisk brug af farver
Vælg en semantisk palet: én farve til brandet, rød til fare, grøn til succes og gul til advarsler. Når farver bruges konsekvent, lærer de brugerne betydningen med et blik.
<div class="space-y-2">
<p class="text-indigo-600 font-medium">Primary action</p>
<p class="text-red-600 font-medium">Danger / Error</p>
<p class="text-green-600 font-medium">Success / Confirmed</p>
<p class="text-yellow-700 font-medium">Warning / Caution</p>
<p class="text-gray-500 font-medium">Neutral / Disabled</p>
</div>Tekstfarve i mørk tilstand
Tilføj præfikset dark: til enhver tekstfarve, så aktiveres den i mørk tilstand. Én linje HTML fungerer til både dit lyse og mørke tema — uden gentagen markup.
<p class="text-gray-900 dark:text-gray-100">
Adapts automatically between themes.
</p>
<p class="text-gray-500 dark:text-gray-400">
Secondary text adapts too.
</p>Brug af vilkårlige farveværdier
Har du brug for en farve uden for paletten? Brug kantede parenteser: text-[#ff5733] til en nøjagtig hex-værdi. Det er praktisk til brandfarver, men brug det sparsomt for at bevare et ensartet system.
<!-- Arbitrary color (one-off brand match) -->
<span class="text-[#ff5733] font-bold">Brand Orange</span>
<!-- Better: define in config for reuse -->
/* tailwind.config.js theme.extend.colors.brand: '#ff5733' */
<span class="text-brand font-bold">Brand Orange</span>Hurtigt tjek
Hurtigt tjek! Se, om farve og gennemsigtighed sidder fast. 🎨
Opsummering af lektionen
Godt! text-{color}-{shade} bruger paletten, skråstregen angiver gennemsigtighed uden at gøre underordnede elementer svagere, og dark: håndterer mørk tilstand. Næste emne er linjehøjde og afstand.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Tekstfarve og opacitet” gratis?
Ja — hele teksten til “Tekstfarve og opacitet” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Tailwind CSS Academy-kurset, skal du opgradere til CoddyKit PRO. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Tekstfarve og opacitet”?
Anvend Tailwinds tekstfarve-utilities fra farvepaletten, og justér opaciteten for at skabe hierarki og kontrast. Du øver dig i Tailwind CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Tailwind CSS Academy?
Der kræves ingen tidligere erfaring. Tailwind CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Tekstfarve og opacitet”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Tailwind CSS Academy-lektion?
Ja. Alle Tailwind CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Skriftstørrelse og skriftvægt
- Tekstfarve og opacitet
- Linjehøjde og bogstavafstand
- Tekstjustering og dekoration