[v4] [vite] Internal server error: Could not resolve value for theme function: theme(...)

[richardgorman]

I'm trying to use tailwindcss in a monorepo setup. I want to use the theme() function inside of CSS files in different packages. Each package should share a @theme configuration to ensure consistency.

I'd like some input on what the best setup for this is. I've got it working, but I have to import the file that contains the @theme config everywhere where I want to use the theme() function. If I don't include this import then I am faced with as error. Also, the colors are redeclared in the DOM everytime I import the config file.

[vite] Internal server error: Could not resolve value for theme function: theme(...)

This feels a bit off. I would expect to be able to use the function without needing the import.

Here is a simple example repo for reference.

[philipp-spiess]

Hey! We recently added a new feature to make this use case simpler: #15228

However, you'll still need to import a theme into each CSS root file that uses Tailwind features as there's no more global per-project JavaScript configuration file. If you're using something like CSS modules, there's going to be a lot of CSS roots that are independent of each other. We mentioned this in the docs in regards to Svelte/Vue setups which share a similar setup with different CSS files per component: https://tailwindcss.com/docs/v4-beta#using-apply-in-vue-svelte

One thing to note in v4 though is that you can just use CSS variables from your root CSS file and won't have to use the theme() function except in some very rare instances (e.g. when you want to use breakpoints in media queries) 👍

[richardgorman]

Thanks @philipp-spiess, I had found @import ... theme(reference) to be a solution but that can be simplified to @import ... reference, which works great.

I think that the documentation here https://tailwindcss.com/docs/v4-beta#using-apply-in-vue-svelte could be rewritten to cover CSS roots in general. I initially skipped over that part of the documentation because I assumed that anything relating to Vue or Svelte was not applicable.