Intellisense not working on WSL2 on Windows 10

[ukjadoon]

The extension works fine if I have a Tailwind CSS project in my local Windows folder e.g. C:\my-project\. However, for projects that are inside of a WSL2 container, the Intellisense does not work at all. This might be some issue related to how WSL2 paths are handled perhaps? E.g. \\wsl2$\home\user\ and so on. Considering that all future Windows based development will move towards WSL2 (including PHP 8), it would be great to add support for this. Also, I have noticed that some extensions ask specifically to be installed inside of WSL2 when opening projects that are inside the Windows Subsystem for Linux...perhaps this issue could be solved with adding support for that?

[dalbitresb12]

Any updates on this?

[ukjadoon]

@dalbitresb12 I haven't heard anything so far. It might be that the main maintainer of the package is on a Mac...so, I am hoping that a kind contributor with some WSL2 knowledge can help fix this.

[dalbitresb12]

Really hope someone could help on this one...

[yayvery]

Works fine for me. I was having trouble at first, but it turns out it was related to how I was setting up plugins in tailwind.config.js. When I fixed that, the extension started working as expected, in WSL2.

[ukjadoon]

@danbeneventano That's great. Could you show us your tailwind.config.js so that everyone else having this issue could have a look too and maybe explain a little better as to what was wrong exactly in it?

[dalbitresb12]

The thing that wasn't working, at least for me, was the detection of @ rules in CSS files. Did that work for you, @danbeneventano?

[yayvery]

@ukjadoon Here is my tailwind.config.js. What fixed the extension for me was installing the typography plugin with require, instead of import. It's also working fine for @ rules in CSS files @dalbitresb12

module.exports = {
  dark: 'class',
  experimental: {
    darkModeVariant: true
  },
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
  purge: {
    content: [
      'content/**/*.md'
    ]
  }
}

[ukjadoon]

@danbeneventano That's my tailwind.config.js. I am using require instead of import from the start but it didn't help. The only thing I have noticed is that if my project resides in the windows file system, the VSCode picks it up just fine. If it is in WSL2 in the Linux file system, then it doesn't work and I have all my Docker configurations there so I can't really move my project back to the Windows file system.

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {
        backgroundColor: ['odd', 'even', 'hover', 'focus', 'active', 'first']
    },
    purge: {
        content: [
            './app/**/*.php',
            './resources/**/*.html',
            './resources/**/*.js',
            './resources/**/*.jsx',
            './resources/**/*.ts',
            './resources/**/*.tsx',
            './resources/**/*.php',
            './resources/**/*.vue',
            './resources/**/*.twig',
        ],
        options: {
            defaultExtractor: (content) => content.match(/[\w-/.:]+(?<!:)/g) || [],
            whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
        },
    },
    plugins: [
        require('@tailwindcss/custom-forms'),
        require('@tailwindcss/ui'),
        require('@tailwindcss/typography')
    ],
};

[yayvery]

@ukjadoon do you have tailwindcss in your dependencies or devDependencies ?

[ukjadoon]

@danbeneventano I have it in my devDependencies

"devDependencies": {
        "@tailwindcss/custom-forms": "^0.2",
        "@tailwindcss/ui": "^0.1",
        "@tailwindcss/typography": "^0.2.0",
        "alpinejs": "^2.0",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "laravel-mix-tailwind": "^0.1.0",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "tailwindcss": "^1.4",
        "vue-template-compiler": "^2.6.11"
    },

[yayvery]

@ukjadoon Try an empty or basic config and see if the extension starts working. If it works, then incrementally add sections to your config to track down the issue.

[ukjadoon]

@danbeneventano thank you. I'll try it out and report back here when I have some answers. I hope I can get to the bottom of this.

[dalbitresb12]

Hi, @danbeneventano.

I've tried a new project with an empty tailwind.config.js. These are the contents in the config (you can see the repository here):

module.exports = {
  purge: [],
  theme: {
    extend: {
      fontFamily: {
        inter:
          '"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
        "inter-var":
          '"Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
      }
    }
  },
  variants: {},
  plugins: []
};

Also, here are my dependencies (there are no devDependencies):

"dependencies": {
  "next": "latest",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "tailwindcss": "1.7.5"
},

Even with this config, this is what I get in my CSS files (tried using WSL1 and WSL2, both with the extension enabled).

[yayvery]

@dalbitresb12 I'm using the following instead of the @tailwind directive.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

I also installed the stylelint extension, and added the following to settings.json:

"css.validate": false,
"less.validate": false,
"scss.validate": false

[dalbitresb12]

@danbeneventano Oh, I see. I thought the extension should handle it all by itself (even the @tailwind directive), without the stylelint extension.

[ukjadoon]

@danbeneventano @dalbitresb12 Guys, I think I found the solution, and I don't think it was the plugin's fault at all

For VSCode under Windows using WSL2, you have to install this extension to enable remote connections

After that is installed, look for the following icon in the bottom left corner of VSCode,

You have to click on it and choose the WSL2 Linux distribution you are using on your machine,

Now when you open a folder, you will be shown a path selector dropdown instead of the usual Windows Explorer view with the paths of your Linux distro. The Tailwind autocomplete should start working now in your projects after following these steps. Good luck!

[dalbitresb12]

@ukjadoon Is the extension working in css files without using the stylelint extension?

[ukjadoon]

@dalbitresb12 yes it seems so :) I am not using the stylelint extension. I think Microsoft released this plugin sometime after WSL2 was launched. Please give it a shot and follow the steps I explained.

[dalbitresb12]

@ukjadoon I've tried what you said again (even though that's the way I've been using WSL). I still get this when I open CSS files. The @tailwind and @apply directives aren't working. You can see below I'm using the Remote WSL extension connected to Ubuntu 18.04. Also, you can see that I do have the Tailwind extension enabled. Correct me if I'm wrong, but shouldn't this extension make the custom directives valid to VS Code CSS validator?

[yayvery]

@dalbitresb12 did you try what I said in this comment? https://github.com/tailwindlabs/tailwindcss-intellisense/issues/153#issuecomment-695132684

[dalbitresb12]

@danbeneventano I haven't tried it but I wanted to know if it was possible to use the directives without using another extension (in this case, stylelint) and without disabling VS Code built-in css validator.

[Chrys-Nicolaides]

I'm running into the same issue here - tried changing the directives, no avail. Already have the WSL extension installed. Using WSL2 and my project is in the Linux filesystem. In the output console, I am seeing this

Found Tailwind config file: \wsl$\Ubuntu-20.04\home\chrys\development\portfolio-website\tailwind.js
Failed to initialise: Error: Cannot find module 'tailwindcss/package.json'
Require stack:
- \\wsl$\Ubuntu-20.04\wsl$\Ubuntu-20.04\home\chrys\development\portfolio-website\noop.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:844:17)
    at a (c:\Users\Chrys\.vscode\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:38328)
    at s (c:\Users\Chrys\.vscode\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:38437)
    at e.exports (c:\Users\Chrys\.vscode\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:38459)
    at resolve (c:\Users\Chrys\.vscode\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:156730)
    at c:\Users\Chrys\.vscode\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:161602
    at c:\Users\Chrys\.vscode\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:156672
    at L (c:\Users\Chrys\.vscode\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:156738)
    at L (c:\Users\Chrys\.vscode\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:156957)
    at c:\Users\Chrys\.vscode\extensions\bradlc.vscode-tailwindcss-0.5.9\dist\server\index.js:13:161544 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '\\\\wsl$\\Ubuntu-20.04\\wsl$\\Ubuntu-20.04\\home\\chrys\\development\\portfolio-website\\noop.js'
  ]

The package.json does exist in the node_modules/tailwindcss folder, I have a hunch there's something strange going on with reading the Linux filesystem, but I don't know enough to say for certain.

[alexbalchin]

I was having the same issue as @Chrys-Nicolaides. Fixed by opening VSCode in a remote window Ctrl+Shift+P > New WSL Window and then reinstall the extension inside the remote window.

[ad-on-is]

Did anyone manage to solve this? I'm working mostly with the Remote WSL extension inside WSL2, and all extensions work fine, except this one.

[kidtango]

@danbeneventano @dalbitresb12 Guys, I think I found the solution, and I don't think it was the plugin's fault at all

For VSCode under Windows using WSL2, you have to install this extension to enable remote connections

After that is installed, look for the following icon in the bottom left corner of VSCode,

You have to click on it and choose the WSL2 Linux distribution you are using on your machine,

Now when you open a folder, you will be shown a path selector dropdown instead of the usual Windows Explorer view with the paths of your Linux distro. The Tailwind autocomplete should start working now in your projects after following these steps. Good luck!

this solution works for me. I just have to open the project from my terminal in WLS2 so that remote WSL can be started. Everything works as expected! Thank you!

[eugenekulikou]

It might be helpful for someone who has troubles: Do not forget to check you have the extension installed within the right (WSL ) environment.

[kaelansmith]

I had the same issue, and in my case, I have a monorepo where Tailwind is being used in a sub-folder/sub-project, and I fixed it by simply adding an empty tailwind.config.js file to the root of the monorepo. Someone else reported this solution here on StackOverflow.

[faizan-ali]

@danbeneventano @dalbitresb12 Guys, I think I found the solution, and I don't think it was the plugin's fault at all

For VSCode under Windows using WSL2, you have to install this extension to enable remote connections

After that is installed, look for the following icon in the bottom left corner of VSCode,

You have to click on it and choose the WSL2 Linux distribution you are using on your machine,

Now when you open a folder, you will be shown a path selector dropdown instead of the usual Windows Explorer view with the paths of your Linux distro. The Tailwind autocomplete should start working now in your projects after following these steps. Good luck!

@ukta

@danbeneventano @dalbitresb12 Guys, I think I found the solution, and I don't think it was the plugin's fault at all

For VSCode under Windows using WSL2, you have to install this extension to enable remote connections

After that is installed, look for the following icon in the bottom left corner of VSCode,

You have to click on it and choose the WSL2 Linux distribution you are using on your machine,

Now when you open a folder, you will be shown a path selector dropdown instead of the usual Windows Explorer view with the paths of your Linux distro. The Tailwind autocomplete should start working now in your projects after following these steps. Good luck!

Thank you!

[leosantosw]

@faizan-ali Thanks, it worked for me. The name extension changed to WSL

then I needed to reinstall the tailwind extension in WSL.

[devbyharshit]

@danbeneventano @dalbitresb12 Guys, I think I found the solution, and I don't think it was the plugin's fault at all

For VSCode under Windows using WSL2, you have to install this extension to enable remote connections

After that is installed, look for the following icon in the bottom left corner of VSCode,

You have to click on it and choose the WSL2 Linux distribution you are using on your machine,

Now when you open a folder, you will be shown a path selector dropdown instead of the usual Windows Explorer view with the paths of your Linux distro. The Tailwind autocomplete should start working now in your projects after following these steps. Good luck!

Works like a charm, thanks for the hard work 👌

[maytees]

Thank you so much, I don't know if this was mentioned earlier, but to whoever is trying to figure this out, if it still doesn't work after installing the WSL plugin, make sure you are doing the following:

1. Running code . in your project (inside WSL, not VSCode)
2. Make sure that you sync local extensions with WSL, via the cloud icon shown under:

[glaucusec]

Thanks for adding this solution. We need to open the folder on wsl window and we have to install the extensions on the wsl too. Then it will work just fine.

[victorbraga8]

@danbeneventano @dalbitresb12 Guys, I think I found the solution, and I don't think it was the plugin's fault at all

For VSCode under Windows using WSL2, you have to install this extension to enable remote connections

After that is installed, look for the following icon in the bottom left corner of VSCode,

You have to click on it and choose the WSL2 Linux distribution you are using on your machine,

Now when you open a folder, you will be shown a path selector dropdown instead of the usual Windows Explorer view with the paths of your Linux distro. The Tailwind autocomplete should start working now in your projects after following these steps. Good luck!

Man, you're the savior of the humanity !!! Thanks a lot, works for me.