Aangepaste kleuren toevoegen

Elk echt project heeft een merkidentiteit met specifieke kleuren die niet in het standaardpalet van Tailwind voorkomen. Door je merkkleuren aan de configuratie van Tailwind toe te voegen, ontgrendel je de volledige API voor hulpprogrammaklassen voor die kleuren — je kunt ze gebruiken met bg-*, text-*, border-*, ring-*, shadow-* en elk ander kleurhulpprogramma. Je aangepaste kleuren werken ook automatisch met opaciteitsmodificatoren en varianten voor de donkere modus.

De eenvoudigste manier om een aangepaste kleur toe te voegen, is door één hexadecimale waarde met een sleutelnaam op te geven in theme.extend.colors. Tailwind genereert een hulpprogrammaklasse voor precies die kleur. De sleutel wordt onderdeel van de klassenaam: een sleutel brand maakt bg-brand, text-brand, border-brand enzovoort. Kleuren met één waarde ondersteunen geen achtervoegsels voor tinten, zoals brand-500.

Voor kleuren die variatie nodig hebben — lichtere en donkere versies voor zweeftoestanden, achtergronden en tekst — definieer je een volledige tintenschaal als een genest object. Gebruik de standaardnummers voor Tailwind-tinten (50, 100, 200, ... 900, 950). Hiermee ontgrendel je hulpprogramma's zoals bg-brand-100 voor subtiele achtergronden, bg-brand-500 voor de hoofdkleur en bg-brand-900 voor donkere accenten.

Handmatig tien hexadecimale waarden voor elke merkkleur schrijven is vervelend. Hulpmiddelen zoals uicolors.app, palettte.app of de online generator voor kleurentinten van het Tailwind-team nemen één basiskleur en produceren een volledige schaal van 50 tot 950 met visueel gelijkmatige gradaties. Veel ontwerphulpmiddelen, zoals Figma, hebben ook plug-ins die kleurenpaletten rechtstreeks in de indeling van een Tailwind-configuratie exporteren.

Binnen een object voor een kleurenschaal kun je een sleutel DEFAULT toevoegen om de kale hulpprogrammaklasse (zonder tintnummer) aan een specifieke tint te koppelen. Als je bijvoorbeeld DEFAULT: '#6366f1' instelt, wordt bg-brand weergegeven als tint 500. Dit is handig wanneer je ontwerp meestal een specifieke primaire tint gebruikt en je daarvoor een korte klassenaam wilt, zonder de volledige schaal op te geven.

Voor kleuren die tijdens runtime veranderen — zoals themakleuren die worden geschakeld op basis van de voorkeur van de gebruiker — definieer je CSS-aangepaste eigenschappen en verwijs je in je Tailwind-configuratie naar die variabelen. Gebruik de tijdelijke aanduiding <alpha-value> om ondersteuning voor opaciteitsmodificatoren in te schakelen (bg-brand/50). Dit patroon vormt de basis voor ontwerpen met meerdere thema's die op Tailwind zijn gebaseerd.

Soms wil je bestaande Tailwind-kleuren een andere naam geven of er een alias voor maken — bijvoorbeeld primary als alias voor indigo, zodat je componenten onafhankelijk blijven van het merk. Importeer het kleurenobject van Tailwind en gebruik het in je configuratie om op naam naar ingebouwde kleuren te verwijzen. Zo blijft je palet DRY: wijzig de alias één keer om alle componentklassen die primary gebruiken bij te werken.

Geef kleuren geen naam op basis van hun tint (indigo, violet), maar op basis van hun semantische rol in je ontwerp (primary, secondary, success, warning, error). Semantische naamgeving maakt je componenten bestand tegen een nieuwe merkstijl: als de merkkleur verandert van indigo naar teal, werk je één configuratie-item bij en nemen alle componenten de wijziging automatisch over.

Aangepaste kleuren werken op dezelfde manier met varianten voor de donkere modus als ingebouwde kleuren. Combineer aangepaste kleuren met lichte tinten voor de lichte modus en varianten met donkere tinten voor de donkere modus. Als je CSS-variabelen voor je kleuren gebruikt, kun je de variabelewaarde in de selector .dark wijzigen. Alle hulpprogramma's die naar de variabele verwijzen, worden dan automatisch bijgewerkt — er zijn geen extra dark:-klassen nodig.

Aangepaste kleuren die als hexadecimale waarden zijn gedefinieerd, ondersteunen ook de syntaxis voor Tailwind's transparantiemodifier (bg-brand-500/75) wanneer Tailwind de hexadecimale waarde kan omzetten naar een RGB-weergave. Kleuren die als CSS-variabelen met de placeholder <alpha-value> zijn gedefinieerd, werken nog beter: zo krijg je bij elk gebruik nauwkeurige controle over de transparantie zonder afzonderlijke utilityklassen nodig te hebben.

Nadat je aangepaste kleuren aan je configuratie hebt toegevoegd, controleer je of ze werken door de build van Tailwind uit te voeren en de klassen in je HTML te gebruiken. Controleer zowel het gegenereerde CSS-bestand (je klassen moeten daarin voorkomen) als het visuele resultaat in de browser. Test ook varianten voor de donkere modus, transparantiemodifiers en hoverstatussen om te controleren of de volledige reeks afgeleide utilities correct werkt met je aangepaste kleuren.

In deze les heb je geleerd hoe je aangepaste kleuren toevoegt aan theme.extend.colors als afzonderlijke hexadecimale waarden of volledige tintenschalen, hoe je semantische namen zoals primary en error gebruikt in plaats van namen van kleurtinten voor een toekomstbestendig ontwerp, en hoe je kleuren definieert als CSS-variabelen met <alpha-value> voor ondersteuning van transparantiemodifiers. Hierna voegen we aangepaste lettertypefamilies toe vanuit Google Fonts en lokale bronnen.