00:00 All right so we have a fair bit to port over. We want to port the keyframes, there are four of them, and then the matching animations for them. So I'll copy that and then in here I will paste all of that like I usually do so we can keep track of what we're implementing. If you've looked at the

00:18 link with the Tailwind CSS default theme with all the CSS variables you'll see that the keyframe animations are defined as just regular keyframes inside this add theme block. So we're going to do that here and hopefully Copilot is going to help us. So at keyframes we'll start with keyframes

00:35 role reveal and let's see if we can trust Copilot here. That looks actually pretty good to me and let's see if it's going to do the rest for us. So the next one should be fade in.

00:51 Come on, there we go. Fade in, that looks also correct and then slide left. At this point I'm blindly believing what it does but it looks actually pretty decent. So if you look at this,

01:06 this is the CSS syntax equivalent of what we had done in the JavaScript config and that looks and that looks pretty correct to me. I will go and delete all of that and the next thing we want

01:20 to do is the animations. So here once again it's going to be with CSS variables so maybe I'll do it above here so it kind of looks really nice along the other variables. Dash dash animate and I think that Copilot can work out what we want. The role reveal might not work the way we

01:39 think just because of the CSS variable here but the others should be pretty straightforward. I like what I see. So Copilot did most of the work for me and it might be wrong but I think this is correct. So we need to import the easings CSS variables from open props easing. So I can go

02:01 at import open props slash easings which is another little CSS package that will contain the CSS variables and what I really like about this CSS config is this is all standard CSS except maybe this add theme directive but it just looks so nice and so simple and I think that

02:20 people that really enjoy CSS are going to enjoy Tailwind version 4 a whole lot. So with all that we need to check that it works. I have a funny feeling that it will work because this is looking all correct to me. So let's hit save and visit our home page and if I refresh I should see the

02:39 staggered reveal animation and sure enough it works. The animation slides here from the right and if we make it smaller it should slide from the top also with the staggered animation. This

02:53 is fantastic and with that we have brought back support for absolutely everything in our theme configuration and just to put the cherry on top even if this file was never loaded at all

03:08 this Tailwind config file was always ignored by Tailwind version 4 but we are going to delete it completely and just before I delete it I want you to realize that there is this content array here that we never had to configure in Tailwind version 4. Tailwind v4 simplifies so many things you don't

03:27 have to tell it where you are going to use Tailwind classes it just works with so much less setup. So we're going to delete that file and we are left with literally one little import

03:44 some CSS variable definition and keyframe definition. This all looks so good there is no content configuration no post CSS plugin pretty cool and let's verify that things still work I'm going to

04:00 hard refresh and it all works. Fantastic I hope that gets you really excited for Tailwind CSS version 4 and that you now feel comfortable using Tailwind CSS 4 in your projects.