why tailwind css intellisense not working in next js app using ts?

Question

this is my tailwind.config.ts file

I tried looking at yt tutorials but nothing has worked so far i also have the tailwind.config.ts file in my next js app it still does'nt work maybe it has something to do with the settings!

Answer 1

Did you install the extension: Tailwind CSS IntelliSense?

Answer 2

It seems that you use the default config file that Next provides upon creating a new project with Tailwind. Some things to verify:

• Ensure that you have properly installed and activated the TailwindCSS Intellisense Extension. Then, after:
  • Check the editor.quickSuggestions

By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience:

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

• Ensure that Tailwind itself is installed in the node_modules directory at the root of your project, in conjuction with it being listed in package.json and package-lock.json.
• The config file should be (and it seems like it is from the screenshot) located at the root of the project with the name of tailwind.config.ts.
• From the official documentation:

Make sure your VS Code settings aren’t causing your Tailwind config file to be hidden/ignored, for example via the files.exclude or files.watcherExclude settings.

• Lastly, do post the output of the Tailwind CSS: Show Output command (By default, you can open the command palette with Ctr+Shift+P) for more info regarding the initialization of Tailwind. It should Load the config file, postcss and Tailwind and then build it.