Tailwind CSS IntelliSense Extension not working! #247

anburocky3 · 2021-01-16T18:08:23Z

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

The text was updated successfully, but these errors were encountered:

Geminii · 2021-01-16T18:14:00Z

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 · 2021-01-16T18:16:01Z

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 · 2021-01-16T19:24:22Z

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

anburocky3 · 2021-01-16T19:27:03Z

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 · 2021-01-17T11:51:31Z

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

anburocky3 · 2021-01-17T13:43:54Z

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 · 2021-01-17T13:49:57Z

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

bluskript · 2021-01-18T04:52:24Z

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 · 2021-01-18T08:59:24Z

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

bluskript · 2021-01-18T15:12:32Z

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

flozero · 2021-01-24T17:45:50Z

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 · 2021-01-24T17:52:51Z

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 · 2021-02-01T20:21:46Z

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 · 2021-02-02T10:33:51Z

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

jamiecarter7 · 2021-02-02T11:52:33Z

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 ***@***.***> 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 <#247 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACIZSDVMGU7XV3LIE62F5W3S47IKDANCNFSM4WFOEISA> .

Atinux · 2021-02-02T11:53:42Z

Try to run npx tailwind init

jamiecarter7 · 2021-02-02T12:23:40Z

Ok, that fixed my issue! :) Thank you! Is this a step I missed in the setup process?

Atinux · 2021-02-02T12:33:42Z

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 · 2021-02-24T19:03:22Z

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

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

IgnisDa · 2021-03-04T05:39:52Z

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

Create tailwind.config.js file or better do npx tailwind init in your terminal, it should create tailwind.config.js

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 · 2021-03-04T07:16:29Z

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

Create tailwind.config.js file or better do npx tailwind init in your terminal, it should create tailwind.config.js

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 · 2021-03-04T07:31:01Z

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 · 2021-03-08T14:23:53Z

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

saymo23 · 2021-03-11T20:53:19Z

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

HusamElbashir · 2021-04-21T22:30:54Z

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

yaolinhong · 2022-03-24T16:00:36Z

npx tailwindcss init
it works for me

EMurrell · 2022-06-14T18:41:38Z

I really struggled with this one, and tried so many suggested fixes. At the end of the day, i installed the previous version of Tailwind CSS IntelliSense extension and now works fine.

Asef00 · 2022-07-26T19:17:55Z

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.

dvlden · 2022-10-09T11:53:02Z

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.

yousefomar724 · 2022-10-11T16:41:09Z

I found that Intellisense for the extension will not work with single quotes, If I use double quotes in my classNames, the intellisense works fine.

The solution for me was to update my settings.json to include

"prettier.jsxSingleQuote": false,
"prettier.singleQuote": false,

mahendrameghwal · 2022-10-18T17:18:14Z

only you just create empty this file your Tailwind CSS IntelliSense extension work properly

wilfredinni · 2022-12-13T23:37:34Z

Same issue with Nuxt 3 stable, nothing of the above works...

wilfredinni · 2022-12-15T23:52:01Z

Same issue with Nuxt 3 stable, nothing of the above works...

I downgraded the tailwind intellisense plugin to version 0.9.1 and everything worked as expected

Atinux · 2022-12-16T10:00:59Z

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

wilfredinni · 2022-12-16T12:21:03Z

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

Yes, but it was a bug with the tailwind intellisense plugin (I don't have the link right now), all worked out fine with version 0.9.1

jamaluddinrumi · 2022-12-21T14:56:24Z

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/**"
  ]

tailwindlabs/tailwindcss-intellisense#663 (comment)

huzaifahj · 2023-01-10T15:56:07Z

It doesn't say anything about the above in the documentation

ahmdsfdn · 2023-05-09T21:28:14Z

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/**"
  ]
tailwindlabs/tailwindcss-intellisense#663 (comment)

it's work for my nuxt 3 project, ty

anburocky3 added the question Further information is requested label Jan 16, 2021

flozero mentioned this issue Feb 3, 2021

fix: correct #247 create tailwind.config.js even if not existing #256

Closed

Atinux self-assigned this Mar 8, 2021

Atinux added enhancement New feature or request and removed question Further information is requested labels Mar 8, 2021 — with Volta.net

Atinux closed this as completed May 12, 2021

Tailwind CSS IntelliSense Extension not working! #247

Tailwind CSS IntelliSense Extension not working! #247

Comments

anburocky3 commented Jan 16, 2021

Geminii commented Jan 16, 2021

anburocky3 commented Jan 16, 2021

Geminii commented Jan 16, 2021

anburocky3 commented Jan 16, 2021

Atinux commented Jan 17, 2021

anburocky3 commented Jan 17, 2021

Atinux commented Jan 17, 2021

bluskript commented Jan 18, 2021 • edited

anburocky3 commented Jan 18, 2021

bluskript commented Jan 18, 2021 • edited

flozero commented Jan 24, 2021

anburocky3 commented Jan 24, 2021

jamiecarter7 commented Feb 1, 2021

Atinux commented Feb 2, 2021

jamiecarter7 commented Feb 2, 2021 via email

Atinux commented Feb 2, 2021

jamiecarter7 commented Feb 2, 2021 via email • edited by Atinux

Atinux commented Feb 2, 2021 • edited

anburocky3 commented Feb 24, 2021

IgnisDa commented Mar 4, 2021

anburocky3 commented Mar 4, 2021

IgnisDa commented Mar 4, 2021 • edited

Atinux commented Mar 8, 2021

saymo23 commented Mar 11, 2021

HusamElbashir commented Apr 21, 2021

yaolinhong commented Mar 24, 2022

EMurrell commented Jun 14, 2022

Asef00 commented Jul 26, 2022 • edited

dvlden commented Oct 9, 2022

yousefomar724 commented Oct 11, 2022 • edited

mahendrameghwal commented Oct 18, 2022

wilfredinni commented Dec 13, 2022

wilfredinni commented Dec 15, 2022 • edited

Atinux commented Dec 16, 2022

wilfredinni commented Dec 16, 2022

jamaluddinrumi commented Dec 21, 2022 • edited

huzaifahj commented Jan 10, 2023

ahmdsfdn commented May 9, 2023

bluskript commented Jan 18, 2021 •

edited

bluskript commented Jan 18, 2021 •

edited

jamiecarter7 commented Feb 2, 2021 via email •

edited by Atinux

Atinux commented Feb 2, 2021 •

edited

IgnisDa commented Mar 4, 2021 •

edited

Asef00 commented Jul 26, 2022 •

edited

yousefomar724 commented Oct 11, 2022 •

edited

wilfredinni commented Dec 15, 2022 •

edited

jamaluddinrumi commented Dec 21, 2022 •

edited