Loading
Current section: Color Design Tokens 10 exercises
Problem

"Non colors" support

Transcript

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.