Autosuggest Tailwind CSS class IntelliSense

Mon, 11 Mar 2024 00:00:00 +0100

By default, the Tailwind CSS IntelliSense extension didn't give automatic IntelliSense when typing. Adding the following to settings.json fixed this.

JSON

"editor.quickSuggestions": {
 "strings": true
},
"css.validate": false,
"editor.inlineSuggest.enabled": true

Getting prettier to work with Tailswind

Mon, 11 Mar 2024 00:00:00 +0100

Getting Prettier to run was not easy. This seemed to do the trick.

.prettierrc

JSON

{
 "tailwindConfig": "./tailwind.config.js",
 "pluginSearchDirs": ["."],
 "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
 "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"]
}

settings.json

JSON

{
 "prettier.requireConfig": true,
 "prettier.documentSelectors": ["**/*.svelte"],
 "[svelte]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 }
}

Vscode on rikosjett

Autosuggest Tailwind CSS class IntelliSense

Getting prettier to work with Tailswind