Lägga till anpassade färger

Alla verkliga projekt har en varumärkesidentitet med specifika färger som inte finns i Tailwinds standardpalett. När du lägger till dina profilfärger i Tailwinds konfiguration får du tillgång till hela API:t för verktygsklasser för dessa färger – du kan använda dem med bg-*, text-*, border-*, ring-*, shadow-* och alla andra färgverktyg. Dina anpassade färger fungerar också automatiskt med opacitetsmodifierare och varianter för mörkt läge.

Det enklaste sättet att lägga till en anpassad färg är att ange ett enda hexvärde med ett nyckelnamn i theme.extend.colors. Tailwind genererar en verktygsklass för just den färgen. Nyckeln blir en del av klassnamnet: en nyckel med värdet brand skapar bg-brand, text-brand, border-brand och så vidare. Färger med ett enda värde stöder inte nyanssuffix som brand-500.

För färger som behöver variation – ljusare och mörkare versioner för hovringstillstånd, bakgrunder och text – definierar du en komplett nyansskala som ett nästlat objekt. Använd Tailwinds standardnummer för nyanser (50, 100, 200, ... 900, 950). Då får du tillgång till verktygsklasser som bg-brand-100 för subtila bakgrunder, bg-brand-500 för huvudfärgen och bg-brand-900 för mörka accenter.

Att manuellt skriva tio hexvärden för varje profilfärg är tidskrävande. Verktyg som uicolors.app, palettte.app eller Tailwind-teamets webbaserade generator för färgnyanser tar en enda basfärg och skapar en komplett skala från 50 till 950 med perceptuellt jämna graderingar. Många designverktyg, som Figma, har också plugins som exporterar färgpaletter direkt i Tailwind-konfigurationsformat.

I ett färgskaleobjekt kan du lägga till nyckeln DEFAULT för att ange att den nakna verktygsklassen, utan nyansnummer, ska använda en specifik nyans. Om du till exempel anger DEFAULT: '#6366f1' återges bg-brand med nyansen 500. Det är användbart när din design oftast använder en viss primär nyans och du vill ha ett kort klassnamn för den utan att avstå från hela skalan.

För färger som ändras under körning – till exempel temafärger som växlas utifrån användarens inställningar – definierar du dem som anpassade CSS-egenskaper och refererar till dessa variabler i Tailwind-konfigurationen. Använd platshållaren <alpha-value> för att aktivera stöd för opacitetsmodifierare (bg-brand/50). Det här mönstret utgör grunden för multitematiska designsystem byggda med Tailwind.

Ibland vill du byta namn på eller skapa alias för befintliga Tailwind-färger – till exempel använda primary som alias för indigo så att dina komponenter förblir oberoende av varumärket. Importera Tailwinds färgobjekt och använd det i konfigurationen för att referera till valfri inbyggd färg med namn. Då undviker du upprepningar i paletten: ändra aliaset en gång för att uppdatera alla komponentklasser som använder primary.

I stället för att namnge färger efter deras nyans (indigo, violet) bör du namnge dem efter deras semantiska roll i designen (primary, secondary, success, warning, error). Semantisk namngivning gör dina komponenter motståndskraftiga mot omprofilering: om profilfärgen ändras från indigo till teal uppdaterar du en konfigurationspost, så återspeglar alla komponenter automatiskt ändringen.

Anpassade färger fungerar med varianter för mörkt läge på samma sätt som inbyggda färger. Kombinera anpassade färger med ljusa nyanser för ljust läge och varianter med mörka nyanser för mörkt läge. Om du använder CSS-variabler för färgerna kan du ändra variabelns värde i selektorn .dark, så uppdateras alla verktygsklasser som refererar till variabeln automatiskt – du behöver inga extra dark:-klasser.

Anpassade färger som definieras som hexvärden stöder också Tailwinds syntax för opacitetsmodifierare (bg-brand-500/75) när Tailwind kan konvertera hexvärdet till en RGB-representation. Färger som definieras som CSS-variabler med platshållaren <alpha-value> fungerar ännu bättre och ger exakt kontroll över opaciteten vid varje användningstillfälle utan att separata utilitetsklasser behövs.

När anpassade färger har lagts till i konfigurationen verifierar ni att de fungerar genom att köra Tailwinds bygge och använda klasserna i HTML. Kontrollera både den genererade CSS-filen (klasserna ska finnas med) och det visuella resultatet i webbläsaren. Testa även varianter för mörkt läge, opacitetsmodifierare och hovringstillstånd för att säkerställa att hela uppsättningen härledda utilitetsklasser fungerar korrekt med de anpassade färgerna.

I den här lektionen lärde ni er att lägga till anpassade färger i theme.extend.colors som enskilda hexvärden eller kompletta nyansskalor, använda semantiska namn som primary och error i stället för nyansnamn för en mer hållbar design och definiera färger som CSS-variabler med <alpha-value> för stöd för opacitetsmodifierare. Nästa steg är att lägga till anpassade teckensnittsfamiljer från Google Fonts och lokala källor.