5

I followed the tailwind installation guide for nextjs

Below is my tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

But the intellisense only works when I start my class names with a space.

enter image description here

Below is my vscode settings.json file. I thought something there might be causing the bug, but commenting out the entire file does nothing to solve the problem.

{
  "color-highlight.markerType": "dot-before",
  "explorer.confirmDelete": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "autoprefixer.formatOnSave": true,
  "autoprefixer.browsers": [
    "last 4 versions",
    "ie >= 9",
    "> 5%"
  ],
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "liveServer.settings.donotVerifyTags": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "scss.format.newlineBetweenRules": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "workbench.settings.openDefaultKeybindings": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "window.zoomLevel": 1,
}
6
  • check the property of that particular Eslint in your vscode. There might be some by default has been selected so you have to do it manually. Commented Dec 8, 2022 at 9:40
  • I disabled Eslint to check for this but the problem persists.
    – dev_el
    Commented Dec 8, 2022 at 10:18
  • Same problem here. What I do is CTRL + Space to "activate" intellisense and then, type
    – Johan
    Commented Dec 8, 2022 at 10:50
  • I'm on a mac so CTRL + Space seems to be Command + Space for me which just opens my Spotlight searchbar...why is tailwind so hard to use.
    – dev_el
    Commented Dec 8, 2022 at 11:02
  • Have you tried adding a VSCode config setting for editor.quickSuggestions (github.com/tailwindlabs/…)?
    – Ed Lucas
    Commented Dec 8, 2022 at 21:57

4 Answers 4

20

I did face this issue a while ago (tailwindcss-intellisense #495). It is due to how VS Code handles string context. Up till now, it is still a hit-and-miss for me, but I can live with it. With that said, adding the following to your .vscode/settings.json should solve the problem.

{
  "editor.quickSuggestions": {
    "strings": true
  }
}
1

In VSCode settings search for: quick suggestions and turn on strings suggestions like this

0

Work around of this would be

ctrl + space bar

0

press ctrl + shift + p, then search for setting.json Inside add the following line at the end:

"editor.quickSuggestions": {
    "strings": true
  }
1
  • Hi, please note, the accepted answer has this exact code
    – pierpy
    Commented Oct 4, 2023 at 20:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.