Multi-Theme Tailwind 16 exercises

Transcript

0:00 I will grab all the CSS variable declarations here, the root scope, and the theme scopes. In the config file, I could replace the body selector here with all of this -- of course, it's all broken -- and start the conversion to a CSS in JavaScript Object. This is a pretty tedious task.

0:21 One tool that's pretty handy for this is this transform.tools that lets you transform all sorts of things. I can literally paste the CSS that I've copied here. It's going to convert all of this. I don't need the converted variable, but I can grab everything that's inside of it.

0:37 Let me replace that CSS with the CSS in JavaScript syntax. Because we are injecting this CSS in the base layer, we're essentially doing exactly what the CSS file was doing. I can go and delete all of that CSS injected to the base layer. When I save, you can see that everything still works.

0:58 Just to show you I'm not playing tricks on you, if I comment out the add-base declaration here and save, all the colors are gone because the CSS is being injected from our plugin API. What this means is we're not doing any work in our CSS file anymore. All of our work is happening in the Tailwind config file. Eventually, we'll move that into its own plugin file.

solution

Transform CSS into CSS in JS for use in a Tailwind CSS Plugin

Let's take all of the CSS variable declarations from our CSS file, including the root scope and our themes:

@layer base {
  :root {
    --primary-50: 238 242 255;
    --primary-100: 224 231 255;
    --primary-200: 208 215 247;
    --primary-300: 170 185 255;
    --primary-400: 137 148 255;