tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.88k stars 195 forks source link

Intellisense not working in plain .js files #647

Closed stesvis closed 2 years ago

stesvis commented 2 years ago

What version of Tailwind CSS IntelliSense are you using?

v0.9.1

What version of Tailwind CSS are you using?

"tailwindcss": "^3.2.1"

What package manager are you using?

npm

What operating system are you using?

Windows

Tailwind config

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

VS Code settings

{
  "sync.gist": "7320ca9efcf48376ba758a1146de519b",
  "python.linting.pylintEnabled": true,
  "python.linting.enabled": true,
  "editor.formatOnSave": true,
  "terminal.external.windowsExec": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.integrated.automationShell.windows": "",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "git.enableSmartCommit": true,
  "git.autofetch": true,
  "files.autoSave": "off",
  "prettier.javascriptEnable": [
    "javascriptreact",
    "javascript",
    "javascriptreact"
  ],
  "editor.columnSelection": false,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.jsxBracketSameLine": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "sync.autoDownload": false,
  "settingsSync.ignoredExtensions": [],
  "workbench.iconTheme": "vscode-great-icons",
  "json.schemas": [],
  "git.confirmSync": false,
  "workbench.colorTheme": "Atom One Dark",
  "[xml]": {
    "editor.defaultFormatter": "redhat.vscode-xml"
  },
  "[csharp]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vsicons.dontShowNewVersionMessage": true,
  "editor.codeActionsOnSave": ["source.addMissingImports"],
  "tailwindCSS.includeLanguages": {
    "javascript": "javascript"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.emmetCompletions": true
}

Reproduction URL


Describe your issue

I have a ./src/styles/style.js file such as:

export const customView = "flex-1 items-center justify-center bg-purple-800";

and I am wondering if the intellisense is supposed to work in a plain js file. I don't get any intellisense (but it works in components when I type into the className property.

I thought that this setting would do it, but it didn't:

 "editor.quickSuggestions": {
    "strings": "on"
  },

Maybe it's not possible at all? Or how can I do to enable it? Thanks

bradlc commented 2 years ago

Hey @stesvis. This is working as expected, Tailwind class IntelliSense is only provided in class attributes.

However, if you want to enable IntelliSense in arbitrary strings you could use the tailwindCSS.experimental.classRegex setting. Check out my comment for more information and the discussion here for some examples: https://github.com/tailwindlabs/tailwindcss/discussions/7554

Hope that helps!