Tekstkleur en transparantie
Pas tekstkleur-utilities uit het kleurenpalet van Tailwind toe en stel de transparantie in om hiërarchie en contrast te creëren.
Tekstkleur en transparantie is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Het kleurensysteem van Tailwind
Tailwind wordt geleverd met een uitgebreide kleurenpalet: 22 kleuren zoals blue, indigo, red en green, elk met 11 tinten van 50 (bijna wit) tot 950 (bijna zwart). Daar kun je volop mee werken.
<!-- 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>Tekstkleur toepassen
Kleur tekst met text-{color}-{shade}. Lage tinten zijn licht, middentinten zijn levendig en hoge tinten zijn donker. text-gray-700 leest zacht op wit; text-gray-900 zorgt voor een sterk contrast.
<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>Merkkleuren in tekst
Gebruik levendige tinten voor betekenis: text-blue-600 voor links, text-red-600 voor fouten en text-green-600 voor succes. Deze conventies voelen voor gebruikers meteen vertrouwd.
<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>Wijzigingsoptie voor tekstopacity
Laat een kleur vervagen met de slash-modifier: text-blue-600/50 toont blauw met 50% dekking. Dat is netter dan dekking op het element zelf, omdat daarmee ook de onderliggende elementen worden gedimd.
<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>Kleurcontrast voor toegankelijkheid
Voor toegankelijkheid heeft tekst voldoende contrast nodig — streef naar een verhouding van 4.5:1. Tint 700 op wit voldoet meestal; vermijd lichte tinten van 50 tot 400 als tekst op wit.
<!-- 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>Tekstkleur op donkere achtergronden
Gebruik op donkere achtergronden lichte tekst: text-white of text-gray-100 voor primaire tekst en text-gray-400 voor secundaire tekst. Dat vormt de basis van een helder donker thema.
<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>Teksteffect met verloop
Maak een effect met verlooptekst met bg-gradient-to-r from-* to-* plus bg-clip-text text-transparent. Het verloop is alleen zichtbaar door de letters heen — heel modern.
<h1 class="text-5xl font-extrabold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
Gradient Headline
</h1>Kleurwijzigingen bij aanwijzen
Voeg een hover:-variant toe om de tekstkleur bij aanwijzen te wijzigen — essentieel voor links en knoppen. Gebruik transition-colors voor een vloeiende overgang en combineer dit met 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>Semantisch kleurgebruik
Kies een semantisch kleurenpalet: één kleur voor het merk, rood voor gevaar, groen voor succes en geel voor waarschuwingen. Als je dit consequent gebruikt, leren gebruikers de betekenis van kleuren in één oogopslag.
<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>Tekstkleur in donkere modus
Voeg het voorvoegsel dark: toe aan elke tekstkleur; die wordt dan actief in de donkere modus. Met één regel HTML ondersteun je zowel je lichte als donkere thema — zonder dubbele opmaak.
<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>Willekeurige kleurwaarden gebruiken
Een kleur nodig die niet in het palet staat? Gebruik blokhaken: text-[#ff5733] voor een exacte hexadecimale kleur. Handig voor merkkleuren, maar gebruik dit spaarzaam om je systeem consistent te houden.
<!-- 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>Snelle controle
Snelle controle! Kijk of kleur en dekking zijn blijven hangen. 🎨
Samenvatting van de les
Geweldig! text-{color}-{shade} gebruikt het palet, de slash stelt de dekking in zonder onderliggende elementen te dimmen en dark: regelt de donkere modus. Hierna: regelhoogte en tussenruimte.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Tekstkleur en transparantie” gratis?
Ja — de volledige tekst van “Tekstkleur en transparantie” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Tekstkleur en transparantie”?
Pas tekstkleur-utilities uit het kleurenpalet van Tailwind toe en stel de transparantie in om hiërarchie en contrast te creëren. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Tekstkleur en transparantie”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Tekengrootte en tekengewicht
- Tekstkleur en transparantie
- Regelhoogte en letterspatiëring
- Tekstuitlijning en decoratie