Intellisense not working in angular project

[alexbjorlig]

Trying to setup tailwind with our Angular project, and it does not work 🤔

tailwind.config.js

module.exports = { theme: { extend: {} }, variants: {}, plugins: [] };

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          syntax: 'postcss-scss',
          plugins: () => [
            require('postcss-import'),
            require('tailwindcss')('./tailwind.config.js'),
            require('autoprefixer'),
          ]
        }
      }
    ]
  }
};

package.json

"devDependencies": {
        "tailwindcss": "^1.6.2"
    },

I followed the troubleshooting steps from the readme, but no help. Is there somewhere we can trace logs/issues?

[bradlc]

Hey @alexbjorlig. Do you see any errors in the Output panel? You can open this from the command palette or press cmd+shift+u if you're on macOS. (You'll need to select tailwindcss-intellisense from the dropdown)

Also are you able to share your project at all? If not could you provide some details such as package manager (npm, yarn etc.), operating system, VS Code version, general project structure?

[alexbjorlig]

I don't see the extension at all in the Output panel?

And it is installed?

Some details:

npm: 6.14.7
node: v14.8.0
OS: macOS Catalina 10.15.6 (19G73)
VS Code Version: 1.48.2
General project structure: Angular CLI project

[alexbjorlig]

I just tried to verify if the extension would work in a "clean" Angular CLI environment - and indeed it does. How can I proceed from here? If I buy you a beer - would you mind take a quick look at our project, or do you know if I can get some error output somehow?

[bradlc]

Happy to take a look if you can share a repository! If it's not in the Output panel that means the language server hasn't booted. I should have said: you need to open a supported file type (e.g. a HTML file) to boot the server

[alexbjorlig]

It's a private repository, but we could create a zoom meeting maybe? Otherwise, I have to make the famous reproducible example 😂

I don't get any output, even when opening an HTML file.

[alexbjorlig]

@bradlc I invited you to a copy of the project, with a description in the README.md on how to proceed. Let me know if there are any other things I can try?

[bradlc]

Thanks @alexbjorlig! I have found the issue: the extension activates only when certain files exist in the workspace. The .vscode/settings.json file in your project is preventing VS Code from finding the Tailwind config file:

"search.exclude": {
  "**/*.js": true
}

[alexbjorlig]

Ahh amazing work @bradlc ! Should I add a PR with this to the README.md, or is there anything else I could help contribute to?

[bradlc]

I think it would be good to add a note to the "Troubleshooting" section maybe? Something along the lines of making sure that your VS Code settings aren't causing the Tailwind config to be excluded from search. If you don't get chance I will add it later this week so don't worry about it 👍