[v4] VSCode extension not working when using only @theme directive

[kelvin2200]

How is the VSCode extension supposed to provide autocomplete in v4 given there's no more tailwind.config file.
The extension no longer works if I delete the tailwind.config.ts file.
I want to use the css only theme config, but now I'm supposed to have the same config duplicated in the config file.
I know I can import the config in the css file, but then again how does one test the new @theme directive?
Tailwind is 50% unusable without the autocomplete

[kylekz]

it's meant to automatically discover tailwind-related .css files, but if you're like me and split your config up into multiple files with multiple @layer base statements, then you might need to explicitly disambiguate the config. add this to .vscode/settings.json

{
  "tailwindCSS.experimental.configFile": "./path/to/your/tailwind/entrypoint.css",
}

[emirefek]

thanks this make it work.

[xDivisionByZerox]

I can confirm that this works for angular 19 projects as well:

{
  "dependencies": {
    [...]
    "@angular/core": "^19.1.0",
    [...]
  },
  "devDependencies": {
    [...]
    "@tailwindcss/postcss": "^4.0.12",
    "postcss": "^8.5.3",
    "tailwindcss": "^4.0.12"
  }
}

[qingzhoufeihu]

it does not work

[bravo680git]

Great, It works for me

{
  "tailwindCSS.experimental.configFile": "src/style.css"
}

[jeromflo]

it's meant to automatically discover tailwind-related .css files, but if you're like me and split your config up into multiple files with multiple @layer base statements, then you might need to explicitly disambiguate the config. add this to .vscode/settings.json

{
  "tailwindCSS.experimental.configFile": "./path/to/your/tailwind/entrypoint.css",
}

It´s works for me too. I am working on angular 19.

[kelvin2200]

@kylekz thank you for the reply, but I still can't get the intellisense to work without a tailwind.config file.
this is what I have in Tailwind CSS Intellisense OUTPUT

Locating server…
Booting server...
Setting up server…
Listening for messages…
Loading Tailwind CSS projects from the workspace settings.
[Global] Creating projects: [{"folder":"","config":"/app/src/index.css","selectors":[{"priority":0,"pattern":"/**"}],"user":true,"tailwind":{"version":"3.4.4","features":["layer:base","separator:root","content-list","jit","css-at-config-as-project","relative-content-paths","transpiled-configs"],"isDefaultVersion":true}}]
[Global] Preparing projects...
[Global] Adding watch patterns: /app/src/index.css, /app/src, /app, , /app/src/css/roboto.css, /app/src/css
[Global] Initializing projects...
[app/src/index.css] Initializing...
[app/src/index.css] supported features: ["css-at-theme","layer:base","content-list"]
[Error - 00:20:43] Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/.yarn/cache/tailwindcss-npm-4.0.0-beta.2-2417a383bd-520432cd07.zip/node_modules/tailwindcss/dist/lib.js' imported from .vscode/extensions/bradlc.vscode-tailwindcss-0.13.59/dist/tailwindServer.js
    at finalizeResolution (node:internal/modules/esm/resolve:265:11)
    at moduleResolve (node:internal/modules/esm/resolve:940:10)
    at defaultResolve (node:internal/modules/esm/resolve:1176:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:542:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:510:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:239:38)
    at ModuleLoader.import (node:internal/modules/esm/loader:472:34)
    at defaultImportModuleDynamicallyForScript (node:internal/modules/esm/utils:227:31)
    at importModuleDynamicallyCallback (node:internal/modules/esm/utils:249:12)
    at I (.vscode/extensions/bradlc.vscode-tailwindcss-0.13.59/dist/tailwindServer.js:1762:11505) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///.yarn/cache/tailwindcss-npm-4.0.0-beta.2-2417a383bd-520432cd07.zip/node_modules/tailwindcss/dist/lib.js'
}
[app/src/index.css] Failed to load workspace modules.
[app/src/index.css] Using bundled version of `tailwindcss`: v3.4.4
[app/src/index.css] Using bundled version of `postcss`: v8.4.31
[app/src/index.css] Building...
[Error - 00:20:43] Tailwind CSS: Invalid or unexpected token
/app/src/index.css:1
@import "tailwindcss";
^

SyntaxError: Invalid or unexpected token
    at wrapSafe (node:internal/modules/cjs/loader:1385:20)
    at Module._compile (node:internal/modules/cjs/loader:1435:41)
    at Module._extensions..js (node:internal/modules/cjs/loader:1564:10)
    at require$$0.Module._extensions..js (/.pnp.cjs:10563:33)
    at Module.load (node:internal/modules/cjs/loader:1295:32)
    at Module._load (node:internal/modules/cjs/loader:1111:12)
    at c._load (node:electron/js2c/node_init:2:16955)
    at require$$0.Module._load (/.pnp.cjs:10411:31)
    at Module.require (node:internal/modules/cjs/loader:1318:19)
    at If._require.Tc.default.require (.vscode/extensions/bradlc.vscode-tailwindcss-0.13.59/dist/tailwindServer.js:1696:1543)
[Global] Initialized 1 projects

I run a Yarn PNP monorepo on a MacBook.
Changing the "tailwindCSS.experimental.configFile" seems to do something, but not nearly what is expected.

1. the extension seems to be using "version":"3.4.4"
2. seems it does try to load the 4.0.0 beta version from the zip, but it can't

UNPLUGGING tailwindcss seems to tell the extension to load the beta version, but autocomplete still doesn't work

----------
RESTARTING
----------
[Info  - 00:29:41] [GLOBAL] No matching project for document {
  fsPath: '/new-dealer-tool/app/src/index.css',
  normalPath: '/new-dealer-tool/app/src/index.css'
}
[Error - 00:29:41] (node:6864) Warning: [Warning] The runtime detected new information in a PnP file; reloading the API instance (/new-dealer-tool/.pnp.cjs)
(Use `Code Helper (Plugin) --trace-warnings ...` to show where the warning was created)
Loading Tailwind CSS projects from the workspace settings.
[Global] Creating projects: [{"folder":"/new-dealer-tool","config":"/new-dealer-tool/app/src/index.css","selectors":[{"priority":0,"pattern":"/new-dealer-tool/**"}],"user":true,"tailwind":{"version":"4.0.0-beta.2","features":["css-at-theme","layer:base","content-list"],"isDefaultVersion":false}}]
[Global] Preparing projects...
[Global] Adding watch patterns: /new-dealer-tool/app/src/index.css, /new-dealer-tool/app/src, /new-dealer-tool/app, /new-dealer-tool, /new-dealer-tool/app/src/css/roboto.css, /new-dealer-tool/app/src/css
[Global] Initializing projects...
[app/src/index.css] Initializing...
[app/src/index.css] supported features: ["css-at-theme","layer:base","content-list"]
[app/src/index.css] Loaded tailwindcss v4.0.0-beta.2: /new-dealer-tool/.yarn/unplugged/tailwindcss-npm-4.0.0-beta.2-2417a383bd/node_modules/tailwindcss
[app/src/index.css] Building...
[Global] Initialized 1 projects
[app/src/index.css] Initializing...
[app/src/index.css] supported features: ["css-at-theme","layer:base","content-list"]
[app/src/index.css] Loaded tailwindcss v4.0.0-beta.2: /new-dealer-tool/.yarn/unplugged/tailwindcss-npm-4.0.0-beta.2-2417a383bd/node_modules/tailwindcss
[app/src/index.css] Building...

Tried with both extension versions (release and pre-release)

[cuquo]

I fixed it by putting in the css file where the tailwind config file it was

[kelvin2200]

That's technically not a fix... as long as there's a tailwind.config file, the intellisense works.
But it kinda defeats the purpose of having a css-only config.
The point is, we're using code-generation for some utilities, spacing, different measurements, effects etc...
and we want to remove those in favor of css, but we can't.

I get that it's a beta, but it's unusable atm. We're only gonna be releasing in a few months, but there are 6 teams working on our project and the dev-ex needs to exist. We're gonna stick to v3 ti'll this gets sorted out.

This would have been a good moment to migrate though... I'm very sad we can't

[cuquo]

not always (tailwind.config), specially in a monorepo, if you debug the extension you'll notice that it looks for certain patterns for css files when it starts, ergo why just putting a root css targeting the main css (in another package) works as a fix at least in a monorepo setup.

[kelvin2200]

Either you got some specific setup/extension/IDE that makes your intellisense work like that, or we're not talking about the same thing. The extension does work, it finds the root css, it can see the config, compilation works etc, but the intellisense doesn't.

[codersaadi]

@kelvin2200
have you found a solution without tailwind.config?
why would we want to have a config file for only intellisense, that's really annoying and defeats the purpose of single source of truth , initially tailwind was built on that , that there will be a config file as the single source of truth, but then they realized that it should not be different than the css file(nice work) but now it has been stable and still we got problems with the intellisense .
extension.
is it working with this
in monorepo
"tailwindCSS.experimental.configFile": "packages/design-system/styles/globals.css",

[debarup24]

Yes, in V4 of Taiwind CSS , the autocompletion is not working as there is no tailwind.config file in the V4.

if you want the autocompletion or class suggestions in V4 , you have to create tailwind.config file in the root and perform the old step as V3.4.17
paste this in tailwind.config : and then intellisense will start working
_```
/** @type {import('tailwindcss').Config} /
export default {
content: [
"./index.html",
"./src/**/.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

[yeasin2002]

so, If I use anything new in my /css @theme, How would I get that suggetions?

[gustavo-alberto]

worked for me! I'm using Vite React Typescript and had to set this configurations on files.

my-app/
├─ node_modules/
├─ public/
├─ src/
│  ├─ index.css
├─ tailwind.config.ts //create this file manually
├─ vite.config.ts

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css

@import 'tailwindcss';

After this, Tailwind CSS IntelliSense VSCode extension worked with Tailwind V4.

[asplunds]

The extension stopped working for us after the extension updated to 1.14.12. After downgrading to 1.14.11 it inexplicably started working again. The output tab didn't say anything useful. For context we're using a monorepo, tailwind 4, no tailwind.config.js/ts needed in the project. We also use Cursor.

Hopefully this helps someone struggling to find the issue.

[mahdi739]

I just ran into the same issue. It was working in version 1.14.11 without a tailwind.config.js file. After updating to 1.14.12, it now needs that file to activate.
(I added my css file to tailwindCSS.experimental.configFile, it still didn't work)