Custom @import breaks Intellisense on v4 beta

[florianbouvot]

What version of VS Code are you using?

v1.95.3

What version of Tailwind CSS IntelliSense are you using?

v0.12.15

What version of Tailwind CSS are you using?

v4.0.0-beta.4

What package manager are you using?

pnpm

What operating system are you using?

macOS

Tailwind config

Config via main CSS file

@import 'tailwindcss';
@import './base/reset.css' layer(base);
@import './base/webfont.css' layer(base);
@import './components/skip-link.css' layer(components);
@import './components/container.css' layer(components);
@import './components/breakout.css' layer(components);
@import './components/link-faux.css' layer(components);
@import './components/button.css' layer(components);
@import './components/forms.css' layer(components);
@import './components/prose.css' layer(components);
@import '/node_modules/swiper/swiper.min.css' layer(components);
@import '/node_modules/swiper/modules/a11y.min.css' layer(components);
@import '/node_modules/swiper/modules/free-mode.min.css' layer(components);
@import '/node_modules/swiper/modules/navigation.min.css' layer(components);
@import '/node_modules/swiper/modules/pagination.min.css' layer(components);
@import './components/swiper.css' layer(components);

@theme {
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  --color-primary-50: var(--color-indigo-50);
  --color-primary-100: var(--color-indigo-100);
  --color-primary-200: var(--color-indigo-200);
  --color-primary-300: var(--color-indigo-300);
  --color-primary-400: var(--color-indigo-400);
  --color-primary-500: var(--color-indigo-500);
  --color-primary-600: var(--color-indigo-600);
  --color-primary-700: var(--color-indigo-700);
  --color-primary-800: var(--color-indigo-800);
  --color-primary-900: var(--color-indigo-900);
  --color-primary-950: var(--color-indigo-950);
}

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

VS Code settings

{
  "codesnap.backgroundColor": "transparent",
  "codesnap.boxShadow": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
  "codesnap.containerPadding": "1em",
  "editor.accessibilitySupport": "off",
  "editor.bracketPairColorization.enabled": true,
  "editor.fontFamily": "'JetBrains Mono', 'Operator Mono', Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.minimap.enabled": false,
  "editor.rulers": [80],
  "editor.tabSize": 2,
  "editor.quickSuggestions": {
    "strings": true
  },
  "diffEditor.useInlineViewWhenSpaceIsLimited": false,
  "diffEditor.experimental.showMoves": true,
  "diffEditor.renderSideBySide": false,
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1",
    "CW_NEW_SESSION": "1",
    "Q_NEW_SESSION": "1"
  },
  "workbench.colorTheme": "Atom One Dark",
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "editor.codeActionsOnSave": {
    
  },
}

Intellisense output

Locating server…
Booting server...
Setting up server…
Listening for messages…
Searching for Tailwind CSS projects in the workspace's folders.
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
{"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}
[Global] Creating projects: [{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/resources/css/app.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/resources/css/app.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/resources/css/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/resources/css/components/_aos.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/resources/css/components/_aos.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/resources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/resources/css/components/_prose.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/resources/css/components/_prose.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/resources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/resources/css/components/button.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/resources/css/components/button.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/resources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/resources/css/components/forms.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/resources/css/components/forms.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/resources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/app.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/app.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/base/typo.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/base/typo.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/base/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/box.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/box.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/button-group.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/button-group.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/button.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/button.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/card.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/card.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/dropdown.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/dropdown.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/forms.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/forms.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/list.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/list.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/listbox.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/listbox.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/modal.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/modal.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/prose.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/prose.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/sidebar.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/sidebar.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/slideover.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/slideover.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}},{"folder":"/Users/florian/Herd/edit-starter","config":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/table.css","selectors":[{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/table.css","priority":0},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/ressources/css/components/**","priority":2},{"pattern":"/Users/florian/Herd/edit-starter/vendor/editcms/edit-cms/**","priority":4}],"user":false,"tailwind":{"version":"4.0.0-beta.4","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}]
[Global] Preparing projects...
[Global] Initializing projects...
[resources/css/app.css] Initializing...
[Global] Adding watch patterns: /Users/florian/Herd/edit-starter/resources/css/app.css, /Users/florian/Herd/edit-starter/resources/css, /Users/florian/Herd/edit-starter/resources, /Users/florian/Herd/edit-starter
[resources/css/app.css] supported features: ["css-at-theme","layer:base","content-list"]
[resources/css/app.css] Loaded tailwindcss v4.0.0-beta.4: /Users/florian/Herd/edit-starter/node_modules/.pnpm/tailwindcss@4.0.0-beta.4/node_modules/tailwindcss
[resources/css/app.css] Building...
[Global] Initialized 1 projects

Reproduction URL

I can share my project if needed.

Describe your issue

I'm working on PHP project views are powered by twig (.html.twig) and I'm using vite with postcss for Tailwind CSS.

Since Tailwind CSS v4 beta, intellisense doesn't provide any suggestions.
I've try with stable en pre-release version, same results.

Is there something wrong in my config or is it an issue with Intellisense / v4 and twig?

Enregistrement.de.l.ecran.2024-12-01.a.01.54.20.mp4

[florianbouvot]

I've try to add an index.html and the result is the same: no suggestions.

[florianbouvot]

Today I've try:

• Uninstall all VS Code extensions , restart and install only Tailwind Intellisense ❌
• Add and load tailwind.config.js in v4 @config '../../tailwind.config.js'; ❌
• Add my views to content source @source '../../App/views/'; ❌
• Install node_modules using rpm instead of pnpm ❌

[florianbouvot]

I've try v4 beta 4 + Intellisense (pre-release) in Statamic CMS, it works except for colors classes like text-red-500, bg-indigo-600, ... and custom variables.

[florianbouvot]

@ denishsharma on Discord identified the problem: custom @import breaks autocomplete

https://discord.com/channels/486935104384532500/486935104384532502/1313785857739849798
https://discord.com/channels/486935104384532500/486935104384532502/1313793778519117895
https://discord.com/channels/486935104384532500/486935104384532502/1313803219998085188
https://discord.com/channels/486935104384532500/486935104384532502/1313806100465979453
...

/CC @thecrypticace (hope you can fix that issue or help us)

[thecrypticace]

@florianbouvot could you provide a link to your project? (or a smaller project that also reproduces the problem)

Give's me something to worth with while I figure out the problems and potential solutions

[TiBianMod]

to me this simple css will break Intellisense

@import "tailwindcss";
@import "#resolveThisCss";

breaks from #resolveThisCss

[florianbouvot]

@thecrypticace I made a video of the issue and I will share you the repo ;)

tw4-issue-import.mp4

EDIT: invitation send ;)

[sweetroll]

Can confirm this is happening on v0.13.61 (pre-release) using tailwind 4.0.0-beta.6. Happy to provide additional details if needed.

The issue seems to occur when using vite aliases but also if there is a bad utility being used in an @apply.

[Stripe2k]

I have the same problem. I am importing css files from node bundles (pnpm) which lead to breaking the Intellisense plugin.

Strangely it seems to work on some css files but on others it does not.

I can confirm that using @imports with vite aliasing (svelte5) definitely breaks it as well.

[kedom1337]

Facing the same problem here (v0.13.61)