`@reference` directive fails to resolve custom theme utilities in svelte builds since v4.1.14

[oneezy]

What version of Tailwind CSS are you using?

v4.1.14

What build tool (or framework if it abstracts the build tool) are you using?

@sveltejs/package 2.5.4, Vite 7.1.9, PostCSS 8.5.6

What version of Node.js are you using?

v20.x+ (Node.js runtime)

What browser are you using?

N/A (build-time issue)

What operating system are you using?

Windows (also affects other platforms)

Reproduction URL

A minimal reproduction would need to be created - this is a complex monorepo setup with svelte-package + @reference directive + custom theme utilities

Describe your issue

The @reference directive fails to properly resolve custom theme utilities when building Svelte component libraries with svelte-package since Tailwind CSS v4.1.14. This was working correctly in v4.1.13 and earlier versions.

Steps to reproduce:

1. Create a Svelte component library using svelte-package
2. Define custom theme utilities in a main CSS file using @theme:

   @theme {
     --radius-button: var(--theme-radius-button, var(--theme-radius, var(--radius-md, 0)));
   }

3. Use @reference directive in component styles to import the theme:

   <style lang="postcss">
     @reference "@layerd/ui/ui.css";
     .btn {
       @apply rounded-button; /* Custom utility from theme */
     }
   </style>

4. Run svelte-package build

Expected behavior:
The build should complete successfully with custom theme utilities being resolved through the @reference directive.

Actual behavior:
Since v4.1.14, the build fails with errors like:

Cannot apply unknown utility class `rounded-button`. Are you using CSS modules or similar and missing `@reference`?

Additional context:

• This appears to be a regression introduced in v4.1.14
• Downgrading to v4.1.13 resolves the issue
• The problem specifically affects complex monorepo setups where components reference a main CSS file with custom theme utilities
• The @reference directive seems to not properly resolve theme variables during the svelte-package build process in v4.1.14

Workaround:
Downgrade to Tailwind CSS v4.1.13:

{
  "@tailwindcss/cli": "4.1.13",
  "@tailwindcss/postcss": "4.1.13", 
  "@tailwindcss/vite": "4.1.13",
  "tailwindcss": "4.1.13"
}

[wongjn]

I tried following the steps but I get a different error:

7:08:28 PM [vite] (client) Pre-transform error: Can't resolve '@layerd/ui/ui.css' in '/home/justin/projects/test/src/routes'
  Plugin: @tailwindcss/vite:generate:serve
  File: /home/justin/projects/test/src/routes/+page.svelte?svelte&type=style&lang.css

I assume because there were no details given in setting up the file at @layerd/ui/ui.css. Consider providing a git repo that reproduces the issue and we can take a look for you.

[thecrypticace]

Yeah a reproduction would help here.

We were previously suppressing some build errors from the postcss plugin and no longer do this — this might be related but it would also mean it wasn't working before either.

Aside: You should not need both @tailwindcss/postcss and @tailwindcss/vite — having them both set up could produce weird results.

[oneezy]

@wongjn yeah i might have to. this is a pretty hefty monorepo though (turborepo + pnpm) so it might take a second.

here's a screenshot to give you a better idea of what's working currently in 4.1.13

---

@thecrypticace it's definitely working in 4.1.13 / not in 4.1.14

i did try everything i could to not use postcss but i couldn't avoid it due to an older iOS bug that couldn't handle the new css light-dark() function. my entire theming system is built on on it. installing the @csstools/postcss-light-dark-function package fixed the issue. but yeah, that's a good clue about the double @tailwindcss/postcss + @tailwindcss/vite combo. i'll try removing it to see if it fixes.