Skip to content

🟦 Tailwind CSS IntelliSense is not working on v4 projects #23

Closed
Closed
🟦 Tailwind CSS IntelliSense is not working on v4 projects#23

Description

@talpitoo
talpitoo
opened on Mar 6, 2025

Hello and thank you once more for the very useful plugin!

I am not sure if this is the right address but i've noticed that Tailwind CSS IntelliSense is not working after i upgrade a v3 Jekyll project to v4.

v3 project

www/tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./_drafts/**/*.md",
    "./_includes/**/*.html",
    "./_layouts/**/*.html",

// etc.

  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/aspect-ratio"),
    // require("@tailwindcss/typography"), // TODO: the @tailwindcss/typography plugin causes inifinite CSS compile loop
    require("@tailwindcss/container-queries"),
  ],
  prefix: "tw-",
};

For the above, the IntelliSense started working only after editing VSCode's settings.json and adding

"tailwindCSS.experimental.configFile": "www/tailwind.config.js"

v4 project

After upgrading to v4, www/assets/css/styles.css:

---
# This yaml frontmatter is required for jekyll to process the file
---

@import 'tailwindcss' prefix(tw);

@custom-variant dark (&:where(.dark-mode, .dark-mode *));

@theme {
  /* NOTE: this would be the v4 way @config './tailwind.config.js'; but in v4 it is no longer required */
  --color-mytheme-blue: #2162b7;

/* etc. */

}

@import './assets/css/base/fonts.css';
@import './assets/css/base/icons.css';
@import './assets/css/base/typography.css';

@import './assets/css/components/grid.css';
@import './assets/css/components/button.css';
@import './assets/css/components/badge.css';

Gemfile:

# etc.

gem "jekyll-tailwindcss", "~> 0.6.2"

Even after updating VSCode's settings.json to

"tailwindCSS.experimental.configFile": "www/assets/css/styles.css"

...the IntelliSense is not coming online.

Tailwind CSS: Show Output (cropped):

Locating server…
Checking if /home/myproject/www/_site/assets/css/components/tile.css may be Tailwind-related…
Checking if /home/myproject/www/_site/assets/css/components/button.css may be Tailwind-related…
Checking if /home/myproject/www/_site/assets/css/components/sections.css may be Tailwind-related…
# etc.
Checking if /home/myproject/www/assets/css/styles.css may be Tailwind-related…
Booting server...
Setting up server…
Listening for messages…
Searching for Tailwind CSS projects in the workspace's folders.
[Info  - 11:55:17 AM] Unable to resolve imports for /home/myproject/www/assets/css/styles.css.
[Info  - 11:55:17 AM] This may result in failure to locate Tailwind CSS projects.
[Error - 11:55:17 AM] t [CssSyntaxError]: /home/myproject/www/assets/css/styles.css:1:1: Unknown word
    at Dm.error (/home/myuser/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:195:35204)
    at qM.unknownWord (/home/myuser/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:201:7884)
    at qM.other (/home/myuser/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:201:6287)
    at qM.parse (/home/myuser/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:201:6606)
    at lL (/home/myuser/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:201:8202)
    at new t (/home/myuser/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:204:1643)
    at Hf.process (/home/myuser/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:204:9575)
    at t.resolveImports (/home/myuser/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:3544:18700)
    at /home/myuser/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.8/dist/tailwindServer.js:3544:15573
    at Array.map (<anonymous>) {
  reason: 'Unknown word',
  file: '/home/myproject/www/assets/css/styles.css',
  source: '---\n' +
    '# This yaml frontmatter is required for jekyll to process the file\n' +
    '---\n' +
    '\n' +
    "@import 'tailwindcss' prefix(tw);\n" +
    '\n' +
    '@custom-variant dark (&:where(.dark-mode, .dark-mode *));\n' +
    '\n',
  line: 1,
  column: 1,
  endLine: 1,
  endColumn: 4,
  input: {
    column: 1,
    endColumn: 4,
    endLine: 1,
    line: 1,
    url: 'file:///home/myproject/www/assets/css/styles.css',
    file: '/home/myproject/www/assets/css/styles.css'
  }
}
{"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true},"path":"/home/myproject/www/_site/assets/css/components/swiper-overrides.css"}
{"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true},"path":"/home/myproject/www/_site/assets/css/components/tile.css"}
{"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true},"path":"/home/myproject/www/_site/assets/css/components/top-navbar.css"}
{"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true},"path":"/home/myproject/www/vendor/bundle/ruby/3.3.0/gems/jekyll-4.3.3/lib/theme_template/example/style.scss"}
[Warn  - 11:55:17 AM] The config /home/myproject/www/vendor/bundle/ruby/3.3.0/gems/jekyll-4.3.3/lib/theme_template/example/style.scss requires a preprocessor and is not supported by Tailwind CSS v4.0.
{"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true},"path":"/home/myproject/www/vendor/bundle/ruby/3.3.0/gems/jekyll-4.3.3/lib/blank_template/assets/css/main.scss"}
[Warn  - 11:55:17 AM] The config /home/myproject/www/vendor/bundle/ruby/3.3.0/gems/jekyll-4.3.3/lib/blank_template/assets/css/main.scss requires a preprocessor and is not supported by Tailwind CSS v4.0.
[Global] Creating projects: [{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/styles.css","selectors":[{"pattern":"/home/myproject/www/assets/css/styles.css","priority":0},{"pattern":"/home/myproject/www/assets/css/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/_site/assets/css/base/typography.css","selectors":[{"pattern":"/home/myproject/www/_site/assets/css/base/typography.css","priority":0},{"pattern":"/home/myproject/www/_site/assets/css/base/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/_site/assets/css/components/badge.css","selectors":[{"pattern":"/home/myproject/www/_site/assets/css/components/badge.css","priority":0},{"pattern":"/home/myproject/www/_site/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/_site/assets/css/components/button.css","selectors":[{"pattern":"/home/myproject/www/_site/assets/css/components/button.css","priority":0},{"pattern":"/home/myproject/www/_site/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/_site/assets/css/components/footer.css","selectors":[{"pattern":"/home/myproject/www/_site/assets/css/components/footer.css","priority":0},{"pattern":"/home/myproject/www/_site/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/_site/assets/css/components/grid.css","selectors":[{"pattern":"/home/myproject/www/_site/assets/css/components/grid.css","priority":0},{"pattern":"/home/myproject/www/_site/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/_site/assets/css/components/prism-overrides.css","selectors":[{"pattern":"/home/myproject/www/_site/assets/css/components/prism-overrides.css","priority":0},{"pattern":"/home/myproject/www/_site/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/_site/assets/css/components/sections.css","selectors":[{"pattern":"/home/myproject/www/_site/assets/css/components/sections.css","priority":0},{"pattern":"/home/myproject/www/_site/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/_site/assets/css/components/swiper-overrides.css","selectors":[{"pattern":"/home/myproject/www/_site/assets/css/components/swiper-overrides.css","priority":0},{"pattern":"/home/myproject/www/_site/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/_site/assets/css/components/tile.css","selectors":[{"pattern":"/home/myproject/www/_site/assets/css/components/tile.css","priority":0},{"pattern":"/home/myproject/www/_site/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/_site/assets/css/components/top-navbar.css","selectors":[{"pattern":"/home/myproject/www/_site/assets/css/components/top-navbar.css","priority":0},{"pattern":"/home/myproject/www/_site/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/base/typography.css","selectors":[{"pattern":"/home/myproject/www/assets/css/base/typography.css","priority":0},{"pattern":"/home/myproject/www/assets/css/base/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/components/badge.css","selectors":[{"pattern":"/home/myproject/www/assets/css/components/badge.css","priority":0},{"pattern":"/home/myproject/www/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/components/button.css","selectors":[{"pattern":"/home/myproject/www/assets/css/components/button.css","priority":0},{"pattern":"/home/myproject/www/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/components/footer.css","selectors":[{"pattern":"/home/myproject/www/assets/css/components/footer.css","priority":0},{"pattern":"/home/myproject/www/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/components/grid.css","selectors":[{"pattern":"/home/myproject/www/assets/css/components/grid.css","priority":0},{"pattern":"/home/myproject/www/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/components/prism-overrides.css","selectors":[{"pattern":"/home/myproject/www/assets/css/components/prism-overrides.css","priority":0},{"pattern":"/home/myproject/www/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/components/sections.css","selectors":[{"pattern":"/home/myproject/www/assets/css/components/sections.css","priority":0},{"pattern":"/home/myproject/www/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/components/swiper-overrides.css","selectors":[{"pattern":"/home/myproject/www/assets/css/components/swiper-overrides.css","priority":0},{"pattern":"/home/myproject/www/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/components/tile.css","selectors":[{"pattern":"/home/myproject/www/assets/css/components/tile.css","priority":0},{"pattern":"/home/myproject/www/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}},{"folder":"/home/myproject","config":"/home/myproject/www/assets/css/components/top-navbar.css","selectors":[{"pattern":"/home/myproject/www/assets/css/components/top-navbar.css","priority":0},{"pattern":"/home/myproject/www/assets/css/components/**","priority":2},{"pattern":"/home/myproject/**","priority":4}],"user":false,"tailwind":{"version":"4.0.6","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":true}}]
[Global] Preparing projects...
[Global] Initializing projects...
[www/assets/css/styles.css] Initializing...
[Global] Adding watch patterns: /home/myproject/www/assets/css/styles.css, /home/myproject/www/assets/css, /home/myproject/www/assets, /home/myproject/www, /home/myproject
[www/assets/css/styles.css] Failed to load workspace modules.
[www/assets/css/styles.css] Using bundled version of `tailwindcss`: v4.0.6
[www/assets/css/styles.css] Building...
[Global] Initialized 1 projects

Do you think it is due to this plugin or should i rather post it under https://github.com/tailwindlabs/tailwindcss-intellisense/issues?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions