Best way creating CSS variables from theme values (CSS-first approach)?

[kgogoberidze]

Hi everyone,

I'm refactoring a Tailwind CSS project and looking for the modern, recommended way to handle a pattern I was previously using in my tailwind.config.js.

My old approach was to extend the theme with new namespaces, pulling values from other parts of my theme. This created new sets of utility classes. For example:

tailwind.config.js (Old approach)

module.exports = {
  theme: {
    extend: {
      animationDelay: ({ theme }) => ({
        ...theme("transitionDelay"),
      }),
      animationOpacity: ({ theme }) => ({
        DEFAULT: 0,
        ...theme("opacity"),
      }),
      // ... and so on for rotate, translate, etc.
    },
  },
};

This worked, but my goal now is to move away from creating more utility classes and instead generate global CSS custom properties (like --animation-delay-100, --animation-opacity-50, etc.) that I can use in my own custom CSS.

I'd like to do this directly in my main CSS file if possible, rather than using a JavaScript plugin. Here is my proposed CSS-based solution:

In my main CSS file

 @theme {
    --animation-opacity-50: var(--opacity-50);
    --animation-opacity-60: var(--opacity-60);
    /* ...etc */
  }

This seems to work, but it feels very manual.

Is there a more dynamic way to do this within CSS without having to list every single value? What is the current best practice for this?
I'm trying to find the scalable way to make my theme values available as standard CSS variables.

Thanks!

[wongjn]

There isn't really any analagous in CSS configuration as far as I am aware. You'd be stuck with copy-pasting as you are now.

[rozsazoltan]

Related:

• Reuse theme properties #18702

Specifically for this example, however, you can generate a utility that allows any integer.

• https://play.tailwindcss.com/1mxHfpUVoR?file=css

@utility animate-opacity-* {
  opacity: calc(--value(integer, [integer]) * 1%);
  opacity: --value([percentage]);
}

[ljh130334]

I’ve run into a similar situation before, and what worked well for me was leaning on @layer base for smaller cases and a simple Tailwind plugin when I needed scalability. With @layer base, it feels lightweight and direct since you can just expose a handful of values as CSS variables.

@layer base {
  :root {
    --opacity-0: theme(opacity.0);
    --opacity-50: theme(opacity.50);
    --opacity-60: theme(opacity.60);
  }
}

But once I needed to expose a larger set of theme values, writing them manually quickly became unmanageable. That’s where a tiny plugin in tailwind.config.js felt much cleaner. It loops through the theme values and generates the CSS variables under :root automatically:

const plugin = require("tailwindcss/plugin");

plugins: [
  plugin(function ({ addBase, theme }) {
    const opacities = theme("opacity");
    const cssVars = Object.fromEntries(
      Object.entries(opacities).map(([key, val]) => [`--opacity-${key}`, val])
    );
    addBase({ ":root": cssVars });
  }),
],

This way, I don’t have to worry about maintaining two sources of truth. The Tailwind theme stays the single reference point, and all variables are always in sync. Personally, I’ve found this approach to be the most sustainable.

[ljh130334]

Hope this helps, and I’d be happy if my experience can make your setup a little easier!