00:00 All right, so we already have Tailwind CSS and the Vite plugin in our dependencies. You can see here Tailwind CSS, Vite plugin and Tailwind CSS. And so all we have to do is, in the Vite config, import this Vite plugin and register it in the plugins array. So I will go in the vite.config.ts and here I will import, I can name it,

00:19 I can name it whatever I want, Tailwind CSS plugin from at Tailwind CSS slash Vite. And then here, after react, I'm going to register the Tailwind CSS plugin. Obviously, the name here needs to match the import. Now Tailwind is registered.

00:36 And the last step we need to do is update how we register Tailwind in the CSS file. Instead of having the three at Tailwind directives, we just at import Tailwind CSS. And that's it. So in the .css file, Tailwind.css, instead of these three directives that we have,

00:54 we are going to have a CSS import and then import Tailwind CSS. And that is it. Now we actually are going to break things like this. And you can see we have a problem with PostCSS. So what happens is the Vite plugin does not use PostCSS, but we still have a PostCSS config file in our project,

01:15 which is trying to register the Tailwind CSS plugin. So if I open the file tree here, we need to get rid of this PostCSS config, which is not making sense anymore. So I will delete that. And all right. So it looks like it's working, but it's not working. And this is completely normal. And it's a great sign.

01:36 So if you think about it, what's happening is the default CSS classes from Tailwind are working, but anything that is custom that we've defined in the config file, like the background color, the text color, the font family, all of this is gone because it's not yet supported in Tailwind version 4

01:55 at the time of this recording. Eventually, Tailwind CSS version 4 will support the JavaScript config file. So all of this should be working. But right now, as Tailwind CSS is still in alpha, there is no support for the JavaScript config file. In other words, nothing that we've configured in the JS config is working.

02:12 And this is sort of great because it's going to force us to move everything to the theme configuration in CSS and verify that it works because we need to be able to bring our styles back to claim that we've done the port correctly. So I hope you're excited to jump onto this journey. Just before we do that,

02:30 this might change by the time Tailwind CSS version 4 stable is there. But right now, you need to be using the pre-release version of the IntelliSense extension. You can see here, I'm using pre-release, which is working with Tailwind CSS version 4 where the normal release one is not just yet.

02:49 But I'm sure this will go away. But in case you're watching this before Tailwind 4 is out, you might want to do this. And with that, let's move on to the next step.