tailwindcss: Tailwind CSS IntelliSense Extension not working!

Try restarting your VS Code and see if the problem still occurs

We are planning to generate a .nuxt/tailwind.config.js automatically so the VS Code extension will work seamlessly.

I believe we shall keep creating the tailwind.config.js file in order to keep intellisense working: https://github.com/tailwindlabs/tailwindcss-intellisense#troubleshooting

Or at least, in our setup documentation, adding a note here about running npx tailwind init to have intellisense working.

PR welcome ❤️

Try to run npx tailwind init

Look at the VSCode’s Output tab for the tailwind autocomplete extension. That gives some useful info.

I have the same issue. UPDATE: looked in VSCode’s ‘Output’ for the extension:

Failed to initialise: /Users/HIDDEN/HarmonyProject/tempest/tailwind.config.js:1
import colors from 'tailwindcss/colors'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:942:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1051:10)
    at Module.load (internal/modules/cjs/loader.js:862:32)
    at Module._load (internal/modules/cjs/loader.js:774:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at Module.require (internal/modules/cjs/loader.js:899:19)
    at Module._require.h.a.require (/Users/HIDDEN/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.7/dist/server/index.js:13:155396)
    at require (internal/modules/cjs/helpers.js:74:18)
    at n (/Users/HIDDEN/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.7/dist/server/index.js:13:161485)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
(node:62654) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'classNames' of undefined
    at Te (/Users/HIDDEN/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.7/dist/server/index.js:13:116506)
    at Ge (/Users/HIDDEN/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.7/dist/server/index.js:13:123887)
    at /Users/HIDDEN/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.7/dist/server/index.js:13:124236
    at Array.forEach (<anonymous>)
    at /Users/HIDDEN/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.7/dist/server/index.js:13:124207
    at Array.forEach (<anonymous>)
    at /Users/HIDDEN/.vscode/extensions/bradlc.vscode-tailwindcss-0.5.7/dist/server/index.js:13:124172
(node:62654) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:62654) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Yep – after changing the import to require, it works now. Kinda a dumb mistake on my part.

Have you tried https://tailwindcss.nuxt.dev/tailwind/editor-support ?

indeed, disabling .nuxt/tailwind.config.cjs & exclude .nuxt from intellisense inspection make it works

  "tailwindCSS.files.exclude": [
    "**/.git/**",
    "**/node_modules/**",
    "**/.hg/**",
    "**/.svn/**",
+   "**/.nuxt/**"
  ]

https://github.com/tailwindlabs/tailwindcss-intellisense/issues/663#issuecomment-1316788128

As a temporary fix: Do the following, until they fix the problem:

1. Create tailwind.config.js file or better do npx tailwind init in your terminal, it should create tailwind.config.js
2. Restart the VSCode. Now it should work. 😃

TailwindCSS extension for VS Code provides a settings option: tailwindCSS.experimental.configFile, but unfortunately doesn’t play well with .ts config.

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

So I suggest sticking with tailwind.config.cjs, it will work in a similar fashion.

npx tailwindcss init worked out. But I already had a tailwind.config.ts file:

import { Config } from 'tailwindcss';

export default <typeof Config>{
  content: [],
  theme: {
    extend: {
      spacing: {
        '68': '17rem',
      },
      fontFamily: {
        'montserrat': 'Montserrat'
      },
      colors: {
        'bluegrey': '#9aabc5',
        'primary': '#3144c4'
      }
    },
  },
  plugins: [],
}

It looks like the one with the .js should exist.

Not extending, using the inbuilt default.

Here is the tailwind.config.js

module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
      // TypeScript
      'plugins/**/*.ts',
      'nuxt.config.ts'
    ]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

npx tailwindcss init it works for me

Was having this issue after an upgrade and it turned out that for some reason I was missing the tailwindcss module in my workspace. Got around it by installing it as a devDependency.

https://github.com/tailwindlabs/tailwindcss-intellisense#troubleshooting

As a temporary fix: Do the following, until they fix the problem:

1. Create tailwind.config.js file or better do npx tailwind init in your terminal, it should create tailwind.config.js
2. Restart the VSCode. Now it should work. 😃

This is not an issue. The tailwind css VSCode extension is activated only if it detects a tailwind.config.js in the workspace. Once it detects it, just restart VSCode for the changes to take effect.

If we want the tailwind css intellisense support we have to do the manual tweak(creating the tailwind.config.js) right. This workflow can be improved by nuxt or tailwind side 😃 That’s my suggestion.

I have the same issue a lot. I have to deactivate and reactivate the plugins every time. I don’t know if it’s related to the module

Tried restarting the VSCode, Still the same problem.

As a workaround, I installed it: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion and it was working after a couple of mins.

Is it a bug? @Atinux