Tailwind IntelliSense not recognizing utilities from imported package CSS in consuming project

[LucetTin5]

What version of VS Code are you using?

For example: v1.96.2 (Cursor v0.49.6)

What version of Tailwind CSS IntelliSense are you using?

For example: v0.14.16

What version of Tailwind CSS are you using?

For example: v4.1.5

What package manager are you using?

For example: pnpm (v9)

What operating system are you using?

For example: macOS

Tailwind config

// Next.js app router (Next 15)
// app/globals.css
@import "tailwindcss";
@import "Package/styles.css"; 

VS Code settings

{
  "tailwindCSS.classFunctions": ["clsx", "cn", "cva"],
  "tailwindCSS.experimental.configFile": "./app/globals.css",
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

Describe your issue

I'm building an internal design system as an npm package using Tailwind CSS v4.1.5.

The package includes a prebuilt styles.css generated by @tailwindcss/cli.
In the design system's worksapce, IntelliSence works correctly via the experimental.configFile setting pointed to the entrypoint CSS file.

However, after publishing the package and installing it into another Next.js (App Router) project, IntelliSense does not suggest the custom utilities defined in dist/styles.css.
Only the core Tailwind CSS utilities are shown, which makes sense since tailwindcss is still imported.

Is there a way to make IntelliSense recognize the utilities defined in the design system package?
Or is the only way to manually copy the full CSS configuration into the consuming project?

Next.js workspace

With imported color variants, there should be some kind of text-primary-main.

Design System workspace

Reproduction

You can find a minimal reproduction here:

https://github.com/LucetTin5/tw-intellisence-error

• The fake-package is a local package with a styles.css using Tailwind CSS v4.1.5.
• The consuming Next.js App Router project imports this file via app/globals.css.
• IntelliSence does not pick up the custom utilities defined in fake-package/styles.css

The repo uses pnpm and is structured as a small monorep (pnpm-workspace.yaml) to siumlate.

[thecrypticace]

Hey, so the problem is the package export here: https://github.com/LucetTin5/tw-intellisence-error/blob/main/fake-package/package.json#L8

You're telling any importer (tailwindcss, intellisense, etc…) that they should use ./dist/styles.css when it's imported. In your case it may appear that it's working in Tailwind CSS but no theme variables from the compiled CSS are actually known as the @theme structure is compiled away.

You can see this if you try to use a class not in the compiled CSS, e.g. accent-primary. Or if you try to @apply something using that theme value:

.test {
  @apply bg-primary; /* this class won't output anything */
}

Using an unknown class in @apply used to be a hard error but now it just logs to the console — this was changed recently to help with error recovery when using PostCSS specifically because throwing can cause weird behavior related to file watching.

The fix here is to import the normal source version and not the pre-compiled one. If you're shipping this as a design system specifically for use in Tailwind CSS v4 projects and not as a standalone thing there's likely not much use in pre-compiling it at all.

[LucetTin5]

@thecrypticace
Thanks for the quick and detailed explanation - really appreciated!

Based on yours here's how I understand it:

The compiled Tailwind CSS file (dist/styles.css) no longer acts as a valid Tailiwnd CSS entry point (css type config) because it only contains the final output, not the configurations.
While it's usable for CSS variables or final styles (classes), it can't be used for extending or applying utilites like @apply or for IntelliSense support.

So, if the goal is to share configuration or extend/overide utilites, it's better to import the original source CSS directly instead of relying on a precompiled version.

Thanks again! It helps me reconsider how I provide styles from design system package.