We want to migrate all of the CSS we created into this plugin - the keyframe animations, the CSS variable definitions, the
.stripes class, and the modifiers in the utilities layer.
To do this, we'll use the
addBase function provided by the
plugin API. Instead of pasting the CSS syntax, we'll use a tool called
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: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: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: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.