00:00 All right let's dive in so we want to reuse the extension of the background color for more than just the background color so what I want to do here is grab the entire object up to here and I'm going to cut this and just like we did for the colors here I'm going to have an object

00:20 let's call it const background colors with an s and I'm going to paste that object here and I can go bring that back here background color is going to use background colors and so this object is exactly the same that we had and our ui should still work note that if

00:39 I comment this out the ui is losing all of the background colors but not the text colors so this is working as intended but now we can bring a few more concerns to the party one of them that I was explaining before was the gradient colors in tailwind there is gradient

00:57 color stops which is one so here we can also bring for gradient color stops the background colors as well and by just doing this if I was once again trying to do background gradient to

01:11 right from now we can do from highlight to accent I doubt that this is going to look good actually it's not too bad but this proves that we now support colors for other use cases than just background colors so we actually don't want to do this so I'm going to remove the from and to

01:30 and find the bg gradients to right and instead we're going to have bg highlight just to bring back things to normal and you get the idea you would probably add a few more extensions of the background colors object here but so you get the point I think one is enough and I'll do the same

01:48 for text colors I will abstract this to a const text colors which is going to be the same object and down here we can extend the text colors as an example of something else that you might want to

02:06 use text colors for think of icons and I think the fill for the icons might be a good use case for the text colors and finally we'll do the same for border colors back to here I'll collapse this one

02:19 and go const border colors equals that object and down here we can extend our border colors like so and back to the icon like we did the fill for the text typically the stroke would be something that

02:37 border colors and also you know what the ring color actually copilot guessed and the other that I can think of is the outline or ring offset colors absolutely yes and outline no outline

02:52 we should also have border colors so all the things that kind of go around an element like a border I think is a good candidate for extending with the same colors that we did so look at this now if I remove the comment we have this nice and tidy config file where we extending a bunch of

03:11 things on top of the base inherit transparent and current color and we have the information of what's happening here and this is something that you could have in a different file a colors or tokens file where you organize all of your stuff so you could even have designers work with

03:29 colors independently of knowing what Tailwind does and what it's for just work with colors and then you could import that color file and just extend your Tailwind config like so pretty cool stuff let's keep going