0:00 Let's start the migration of the CSS into this plugin. We want to migrate everything that we've created, so the keyframe animations, the CSS variable definitions, the stripes class, and the modifiers in the utilities layer.

0:14 We'll start with the base layer. We want to port all of that into our plugin. For this, we will need to use the addBase function provided by the plugin API. Here, we can call addBase, but we can't just paste the CSS syntax, because it's expecting CSS-in-JavaScript here.

0:32 Instead of doing the conversion manually, I'll use a tool called transform.tools. Here, on the left column, I will paste the CSS. You can see that immediately it's giving us a CSS-in-JavaScript version. We actually don't want the converted variable. We just want its contents here.

0:48 I'll copy this. Instead of the CSS here, I will paste that and hit save. That's the base layer. Technically, I should be able to delete the whole @layer base block here. Everything should still work. Yeah, it does, because it's now handled by the Tailwind plugin.

1:06 Next, we want to do the components layer, which is our stripes CSS. Once again, I will copy the entire content of the components block. This time, we will need to use the -- you guessed it -- addComponents function. Once again, it needs CSS-in-JavaScript. We will use this great little tool, copy that, and paste it here.

1:30 There's just one thing I'm not happy with. It's the background image. Instead of having this line break with a string, I want to use template tags here so we can have it on multiline, which makes it a little bit nicer to read. Bear with me for a second while I refactor the syntax here. I think we just have that one. We're good. Let's hit save. Yeah, that's much better.

1:53 Once again, we've defined the components layer CSS, which is the equivalent of all this. I'm pretty confident that I can get rid of the entire @layer components block, and things will still work.

2:06 You know the drill. We want to add the utilities now. I'm going to copy this, generate the CSS-in-JavaScript for it. At the top, I will reach for the addUtilities function. Down here, I'll call that, addUtilities. I will paste the CSS-in-JavaScript equivalent of our modifiers. Now, we can delete everything in the CSS file. Everything still works.

2:32 Now, let me prove that this is really coming from the plugin. In the tailwind.config file here, I will comment out the plugins array. Check this out. Nothing is working now, so it's all really coming from this plugin. Good job.