Generating @theme variables from a plugin

[yvvki]

I'm a TailwindCSS plugin author.

I'm trying to use a custom function to generate the --color-* variables, but using the compatibility @plugin directive doesn't output them in the resulted CSS.

My plugin looks something like this:

plugin.withOptions<Partial<Options>>(
  // ...,
  (options) => {
    const { "base-hue": baseHue } = { ...defaultOptions, ...options };
    // ...
    return {
      theme: {
        color: myFunction(baseHue), // Outputs colors like `plugin: { 400: "oklch(...)" }`
      },
    }
  }
);

And use it via my CSS:

@import "tailwindcss";

@plugin "my-plugin-name" {
  base-hue: 300;
}

@theme {
  --color-test-400: #444333; // For testing
}

But the resulted CSS doesn't actually output the actual color.

@theme {
  /* ... */
  --color-test-400: #444333;
}

/* ... */

@layer base {
  /* ... */
  .bg-plugin-400: {
    background: oklch(/* ... */); /* Why it doesn't generate and use the color from the @theme? */
  }
  .bg-test-400 {
    background: var(--color-test-400);
  }
}

Other stuff like using @theme inline etc. from the plugin is not possible. Is there any workarounds?

[wongjn]

Why it doesn't generate and use the color from the @theme?

This is because the JavaScript plugin API is mainly for v3 backwards compatibility. In v3, CSS variables weren't use and the values were used directly as you have experienced.

As a workaround, you can output the CSS variables yourself:

plugin.withOptions<Partial<Options>>(
  (options) => {
    const { "base-hue": baseHue } = { ...defaultOptions, ...options };
    const colors = myFunction(baseHue);

    addBase({
      // Use `colors` to convert to an object shape like:
      // ```
      // {
      //   '--color-plugin-400': 'oklch(…)',
      // },
      // ```
      ':root': …,
    });
  },
  (options) => {
    // ...
    return {
      theme: {
        colors: {
          plugin: {
            400: 'var(--color-plugin-400)',
          },
        },
      },
    }
  }
);

[yvvki]

Is there any plan on having custom JS functions in CSS or modernizing the plugin system in the future?

[wongjn]

Haven't heard anything about custom JS functions in CSS. The modern plugin system is now @theme, @utility, @custom-variant, et al. rules in a CSS file.

[yvvki]

I'm making a function that generate the --color-* variables that utilize color.js. Guess I can't do it using the v4's CSS rules 😭