CODEWITHSUNDEEP
tailwind-csssveltesvelte-3
sk shahriar ahmed raka
sk shahriar ahmed raka

Reputation: 1179

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

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'),
  ]
};

Upvotes: 10

Views: 3700

Answers (4)

Veena Katti
Veena Katti

Reputation: 36

Do the following settings for the VS code editor

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

Upvotes: 0

Gep Sher
Gep Sher

Reputation: 27

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

Upvotes: 1

yes_vikash
yes_vikash

Reputation: 91

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,
    }
}

Upvotes: 9

Taher
Taher

Reputation: 19

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

Upvotes: 0

Related Questions