Tailwind CSS IntelliSense is not auto-suggesting in VScode inside a svelte js application? it works if I reinstall it every time I open VScode

Question

It seems that Tailwind CSS IntelliSense is not working every time I start VScode , after reinstalling it works, on the other hand when it works Tailwind CSS IntelliSense is not suggesting unless I press the space button. If I move one class to another it doesn't suggest unless I press the space button

I am using Tailwind CSS IntelliSense v0.7.4 ,VScode 1.63.2 , Ubuntu 21.10

package.json

{
  "name": "svelte-ts-tailwind-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.0",
    "@rollup/plugin-node-resolve": "^13.0.0",
    "@rollup/plugin-typescript": "^8.3.0",
    "@tsconfig/svelte": "^2.0.1",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.4",
    "postcss-load-config": "^3.1.0",
    "rollup": "^2.60.2",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.44.2",
    "svelte-check": "^2.2.10",
    "svelte-preprocess": "^4.9.4",
    "tailwindcss": "~3.0.0",
    "tslib": "^2.3.1",
    "typescript": "~4.5.3"
  },
  "dependencies": {
    "sirv-cli": "^1.0.14"
  }
}

tailwind.config.cjs

module.exports = {
  mode:"jit",
  darkMode: 'class', // This can be 'media' if preferred.
  // Don't add a glob below `public` as Rollup doesn't
  // recognize them and will rebuild in an infinite loop.
  content: [
    './src/**/*.svelte',
    './src/**/*.html',
    './public/index.html',
  ],
  theme: {
    extend: {
      colors: {
        svelte: '#ff3e00',
      },
    },
  },
  plugins: [],
}

postcss.config.cjs

module.exports = {
  plugins: [
    require('tailwindcss'),
  ]
};

Outstretch

I was adding a class to a Stripe input element via a classes attribute and not getting Tailwind suggestions. Solution was to add 'classes' to the list under 'Tailwind CSS: Class Attributes' in the extension's settings. – Ibadan

Answer 1

By default in VS code, settings for suggestion for strings is false, and as we type class names in components as a string you have to set this to true like this:

"editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": true,
    }
}

Dedal

You're a lifesaver, wasted hours on just this! – Suellensuelo

Answer 2

You can trigger IntelliSense in any editor window by typing Ctrl+Space See: IntelliSense in VSCode

Ascertain

Answer 3

Try another version of tailwind for this error may help to solve your problem.

Hards

Answer 4

Do the following settings for the VS code editor

"tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
   "strings": true
}

Sitar