Overriding Tailwind's color classes got rid of the "non-colors" such as -inherit, -current, and -transparent. Let's add them back!

Add Tailwind's non-colors back by simply adding them to theme.colors before the custom colors.

"Non colors" support

[00:00] Okay this one is really quick once again so in my tailwind config in the theme colors before the colors I mean it could go after but I'll go before here we're going to bring the three missing

[00:11] definitions in our colors inherit current for current color and transparent for transparent and now especially with this one in place here on hover we should have the background go transparent

[00:26] and it does so we have brought back support for transparency and also brought back support for inherit and current color which is going to save head-scratching bugs down the line to your developer team.

[00:00] What we've done in the previous lesson might seem pretty good but we've actually broken some things. So let me demonstrate. Let's say that I want this button on hover instead of going black to go transparent. So on hover I want the background to become transparent and show the

[00:15] white card behind. So I will try here in the button on hover instead of bg gray 100 I'll try bg gray transparent. All right and now let's go hover the button and oops it's not changing color

[00:31] at all. The transparency is not working and this is not a bug. This is some problem that we have created by overriding the colors object completely. It turns out that the colors object in Tailwind

[00:44] has more than just actual colors. It has things like inherit current color and yep transparent. Let me show you real quick if I go to the Tailwind CSS docs. Let me zoom in and search for any color. Yeah text color will do. You can see that there are all the colors here but there's also text inherit,

[01:04] text current and text transparent. And the same would be true for any of these border colors inherit current and transparent on top of all the other colors. So what we need to do is actually

[01:17] bring back these three essential but non-obvious colors that are present in the Tailwind theme by default. And so you're going to add this to the colors object before the custom colors so that we can bring back this functionality.

Semantic, themable color design tokens in Tailwind CSS

In this workshop, we're going to define semantic color tokens in Tailwind CSS,
to adhere to a convention set in a Figma design File.

We'll cover both Tailwind CSS v3 and v4 approaches 🔥

## What to expect:

**Figma to Tailwind CSS:** Convert a Figma design to a Tailwind CSS project.

**Color Design Tokens:** Implement custom colors in your Tailwind CSS project,
starting with raw colors and adding a layer of abstraction for semantic color
tokens.

**Semantic Design Tokens:** Lock down color usage to specific scenarios.

**CSS Variables:** Leverage CSS variables to make your color tokens themable.

**Tailwind CSS v4:** Prepare for the future by porting your work to the Tailwind
v4 CSS-first theme configuration.

Tailwind CSS Color Tokens

Simon Vrachliotis

Learn about the role that semantic design tokens play in mature design systems.

Introduction to Tailwind CSS Color Tokens

Introduction

In this exercise, you'll recreate a design from Figma using Tailwind. 

Intro

Recreate a design in Figma using Tailwind as precisely as possible on both mobile and desktop.

Use Tailwind with CSS Grid classes to re-create a design from Figma pixel by pixel.

Design Implementation

Figma to Tailwind CSS

Implement custom colors from a Figma design into a Tailwind project. Starting with the raw colors first and then an abstraction for semantic color tokens.

Extend your Tailwind theme with the 14 raw colors from the Figma design and update the UI to use them.

Extend your Tailwind theme with color tokens and then style your app based on the colors from a Figma design using them.

Custom colors in UI

Cutoff Tailwind's default colors by defining all of the colors directly in theme.colors and override everything else.

Cutoff Default Colors

Having all of your color tokens available globally can lead to design problems. Instead, scope your colors to specific use-cases such as background or text.

Create a bespoke design system in Tailwind by extending the Tailwind theme with semantic design tokens for different contexts.

Semantic Design Tokens

When overriding colors it's easy to wipe out most of Tailwind's core color plugins. Your challenge is to extend your theme with a few missing plugins.

Abstract your semantic design tokens into constants and then reference them in theme.extend for the various core color plugins in Tailwind.

Broader Scopes

Make your design themeable! Move your colors from the Tailwind config into CSS Variables and then consume those variables in the config.

Move your colors and semantic tokens in Tailwind config to CSS Variables using HSL strings to make your colors changeable at runtime.

CSS Variables

Support enabling dark mode support in your tailwind project with just a single class.

Tailwind CSS Color Tokens

Tailwind CSS Color Tokens

Transcript

"Non colors" support

Transcript