CSS Variables defined in addBase not recognized when used in addComponents

[ersi77]

Description

I'm using CSS variables to implement dynamic theming in Tailwind, where the actual color values change based on a [theme=light] or [theme=dark] attribute. I define these CSS variables in addBase() and map them to Tailwind color utilities, but when I try to reference them directly in addComponents(), they don't seem to be properly recognized or applied.

Minimal Reproducible Config

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

const dynamicThemeColors = {
  'color-surface-primary': 'var(--color-surface-primary)',
  'color-surface-secondary': 'var(--color-surface-secondary)',
  'color-text-primary': 'var(--color-text-primary)'
};

module.exports = {
  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        ...dynamicThemeColors,
        blue: {
          500: '#3B82F6',
          900: '#1E3A8A'
        },
        gray: {
          50: '#F9FAFB',
          900: '#111827'
        }
      }
    }
  },
  plugins: [
    plugin(({ addBase, addComponents, theme }) => {
      addBase({
        '[theme=light]': {
          '--color-surface-primary': theme('colors.gray[50]'),
          '--color-surface-secondary': theme('colors.blue[500]'),
          '--color-text-primary': theme('colors.gray[900]')
        },
        '[theme=dark]': {
          '--color-surface-primary': theme('colors.gray[900]'),
          '--color-surface-secondary': theme('colors.blue[900]'),
          '--color-text-primary': theme('colors.gray[50]')
        }
      });

      addComponents({
        '.custom_scrollbar': {
          '&::-webkit-scrollbar': {
            width: '12px'
          },
          '&::-webkit-scrollbar-thumb': {
            background: 'var(--color-surface-primary)',
            borderRadius: '100px'
          }
        }
      });
    })
  ]
};

Expected Behavior

The .custom_scrollbar component should properly use the CSS variable --color-surface-primary which changes based on the theme attribute.

Actual Behavior

The CSS variable appears not to be recognized or applied correctly when used directly in addComponents().

Questions

1. Is this the recommended approach for dynamic theming with CSS variables in Tailwind?
2. Should CSS variables defined in addBase() be automatically available in addComponents()?
3. Is there a better pattern for implementing theme-based CSS variables that need to change based on a parent attribute/class?

Environment

• Tailwind CSS version: 3.4.17
• Node version: 20.19.3

[rozsazoltan]

Does it work as expected? https://play.tailwindcss.com/hfiPY1WKwR

Can you provide a reproduction showing your non-working example?

[ersi77]

you are actually correct.. my problem was with state layer but I got confused by this because it still shows in devtool that the color is not defined (but it actually works)