Tailwindcss-module: Tailwind CSS IntelliSense Extension not working!

[anburocky3]

I also generated the tailwind.config.js but still it's not working.. Why is that?

[Geminii]

I also generated the tailwind.config.js but still it's not working.. Why is that?

I don't understand the problem you are having because the problem is located on the IntelliSense plugin.
Or do you create tailwind.config.js and this one isn't apply to your nuxt project 🤔
I'm using Tailwind CSS IntelliSense Extension on my vscode and i don't have any project about it.

[anburocky3]

I also generated the tailwind.config.js but still it's not working.. Why is that?

I don't understand the problem you are having because the problem is located on the IntelliSense plugin.
Or do you create tailwind.config.js and this one isn't apply to your nuxt project
I'm using Tailwind CSS IntelliSense Extension on my vscode and i don't have any project about it.

Using tailwindcss-module in your nuxt problem? I'm having problem with the intellisense, the classes names are not suggesting for me.

[Geminii]

Default classes or you extend some of them ? Can you provide screen or your config ?
Need more information for help

[anburocky3]

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: [],
}

[Atinux]

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

[anburocky3]

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

[Atinux]

I don’t know, if works for all my projects using it 🤔

[Bluskript]

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.

[anburocky3]

I'm not using any import inside the tailwind.config.js just using the default config file. but still experiencing the problem :/

[Bluskript]

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

[f3ltron]

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

[anburocky3]

There is no output logs. But it's not working either.. :/ I'm using this extension in order to work.
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

[jamiecarter7]

I'm having a similar issue, though its a great way to really learn the syntax it makes it a little less fun to use.

[Atinux]

@jamiecarter7 even after creating the tailwind.config.js file?

[jamiecarter7]

I created the app from scratch using the nuxt create and selecting the
tailwindCSS option.

But the intellisense is not working since I set up the project.

I have tried to look through the nuxt folder for the base tailwind files
but I am unable to find any files to look at.

The tailwind classes are working! It's purley that the intellisense is not
working.

On Tue, 2 Feb 2021 at 10:34, Sébastien Chopin [e-mail]
wrote:

@jamiecarter7 https://github.com/jamiecarter7 even after creating the
tailwind.config.js file?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt-community/tailwindcss-module/issues/247#issuecomment-771539039,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACIZSDVMGU7XV3LIE62F5W3S47IKDANCNFSM4WFOEISA
.

[Atinux]

Try to run npx tailwind init

[jamiecarter7]

Ok, that fixed my issue! :)

Thank you!

Is this a step I missed in the setup process?

[Atinux]

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 <3

[anburocky3]

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. :)

[IgnisDa]

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.

[anburocky3]

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.

[IgnisDa]

IMO that workflow might be detrimental to others. For example, if I have the Tailwind extension installed but am not actually using tailwind in my project, the popups from the extension will only make it more difficult to code and create useless clutter. Moreover, since almost all projects need to define a custom tailwind.config.js, its really a non-issue.

This workflow can be improved by nuxt or tailwind side

I agree with this. Maybe yarn add --dev @nuxtjs/tailwindcss can automatically setup a default file (for example run npx tailwind init under the hood?)

[Atinux]

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

[saymo23]

I followed this guide but without installing nuxt with tailwind in the CLI, I installed it with npm and it worked for me.

https://tailwindcss.com/docs/guides/nuxtjs