Cannot use Tailwinds theme() function.

[houtaiwong-toast]

Describe the bug

Hello i'm not sure if this is a bug or just expected behavior.

When adding a defaultTheme and another theme. The tailwindcss theme() function does not seem to be working as expected. It doesn't create a ::root variable. Is it not possible to use theme()? Is there a way where I can use it.

In my default tailwind.config.js file I'm able to do things like this inside the extend object.

      textColor: (theme) => {
        return {
          blue: {
            0: theme('colors.blue.0'),
            25: theme('colors.blue.25'),
            50: theme('colors.blue.50'),
            75: theme('colors.blue.75'),
            100: theme('colors.blue.100')
          },
          black: theme('colors.black'),
          gray: {
            30: '#e5e5e5',
            75: '#7a7a7a'
          },
          action: {
            default: theme('colors.blue.75'),
            hover: theme('colors.blue.100'),
            disabled: theme('colors.gray.125'),
            'focus-outline': theme('colors.sky.50')
          },
          'nav-gray': '#252a35'
        }
      },

When I import and try and add this to the defaultTheme extend object it doesn't seem to take. So my defaultTheme colors never show up.

Your minimal, reproducible example

none.

Steps to reproduce

defaultOptions.js

      textColor: (theme) => {
        return {
          blue: {
            0: theme('colors.blue.0'),
            25: theme('colors.blue.25'),
            50: theme('colors.blue.50'),
            75: theme('colors.blue.75'),
            100: theme('colors.blue.100')
          },
          black: theme('colors.black'),
          gray: {
            30: '#e5e5e5',
            75: '#7a7a7a'
          },
          action: {
            default: theme('colors.blue.75'),
            hover: theme('colors.blue.100'),
            disabled: theme('colors.gray.125'),
            'focus-outline': theme('colors.sky.50')
          },
          'nav-gray': '#252a35'
        }
      },

Themer Plugin Config

  plugins: [
    require('tailwindcss-themer')({
      defaultTheme: {
        extend: {
          colors: {
            ...defaultOptions.theme.extend.colors
          },
          textColor: {...defaultOptions.theme.extend.textColor}
        }
      },
      themes: [
        {
          name: 'test',
          extend: {
            colors: {
              brand: {
                50: '#000000'
              }
            },
            textColor: (theme) => ({
              gray: {
                30: '#ffffff'
              }
            })
          }
        }
      ]
    })
  ]

When i try and use text-gray-30, with my default theme its color just becomes the default browser text color. But in the "test" theme i'm able to see that text-gray-30 gives me the overridden color.

Expected behavior

I expected the text-gray-30 class in defaultTheme to be #e5e5e5, but what I got was the default browser text color.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

macOS
Chrome

tailwindcss-themer version

^4.0.0

Additional context

NOTE: If I rewrite the defaultOptions textColor to not use theme() it will work perfectly.

No response

[RyanClementsHax]

Hiya! Thanks for opening this. This plugin supports textColor.

Also, thanks for providing the config you used. I was able to find the problems causing your issue. You just need to tweak a few things and you're all set.

-      textColor: (theme) => {
+      textColor: ({ theme }) => {
        return {
          blue: {
            0: theme('colors.blue.0'),
            25: theme('colors.blue.25'),
            50: theme('colors.blue.50'),
            75: theme('colors.blue.75'),
            100: theme('colors.blue.100')
          },
          black: theme('colors.black'),
          gray: {
            30: '#e5e5e5',
            75: '#7a7a7a'
          },
          action: {
            default: theme('colors.blue.75'),
            hover: theme('colors.blue.100'),
            disabled: theme('colors.gray.125'),
            'focus-outline': theme('colors.sky.50')
          },
          'nav-gray': '#252a35'
        }
      },

  plugins: [
    require('tailwindcss-themer')({
      defaultTheme: {
        extend: {
          colors: {
-            ...defaultOptions.theme.extend.colors
+            ...defaultOptions.colors,
          },
-          textColor: {...defaultOptions.theme.extend.textColor}
+          textColor: defaultOptions.textColor,
        }
      },
      themes: [
        {
          name: 'test',
          extend: {
            colors: {
              brand: {
                50: '#000000'
              }
            },
-            textColor: (theme) => ({
+            textColor: ({ theme }) => ({
              gray: {
                30: '#ffffff'
              }
            })
          }
        }
      ]
    })
  ]

You just need to deconstruct the theme field on the object passed in the callback per tailwind's guide and directly reference the fields on the defaultOptions since it didn't have theme or extend fields.

Here is a working example if you would like to dive further https://codesandbox.io/p/devbox/118-repro-attempt-pr96gh?file=%2Ftailwind.config.js%3A39%2C20-40%2C38

[houtaiwong-toast]

Thank you! Appreciate the help