Use prettier-plugin-tailwindcss to format css classes

[garlandcrow]

So I have a working version of this by adding prettier-plugin-tailwindcss as a dep to the svelte-vscode package and then looking for a tailwind.config.js file in the VSCode workspace when formatting a svelte file to selectively use either the prettier-plugin-tailwindcss or prettier-plugin-svelte to format. I am not sure what the desired solution is by the community/maintainers. But I can submit a PR if this sounds like what people want.

[garlandcrow]

I guess there also should be an opt-in setting for this since some tailwind users probably don't want the formatting.

[thenbe]

Relevant:

tailwindlabs/prettier-plugin-tailwindcss#31
We've bundled the prettier-plugin-svelte directly into prettier-plugin-tailwindcss, so if you'd like to use this plugin with Svelte, just uninstall prettier-plugin-svelte and everything should work as expected.

That's what I did and now svelte.svelte-vscode is also successfully sorting my css classes.

[dummdidumm]

Closing this. As pointed out in the comment above, Tailwind bundles this Svelte plugin, so use the Tailwind plugin instead. Tell VS Code to format Svelte files with the Prettier extension (install it if you haven't), and then npm install the Tailwind plugin into your node_modules instead of the Svelte plugin.

[beeb]

For anyone stumbling upon this, here is what I had to do to make it work (using pnpm but not sure if relevant).

1. In project devDependencies, add both prettier-plugin-svelte and prettier-plugin-tailwindcss
2. In .prettierrc, have this, but no plugins key (autoload should work):

{
	"pluginSearchDirs": ["."],
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
}

3. In VSCode settings:

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

[tobiaswutz]

not working for me :/

[harryqt]

For anyone stumbling upon this, here is what I had to do to make it work (using pnpm but not sure if relevant).

1. In project devDependencies, add both `prettier-plugin-svelte` and `prettier-plugin-tailwindcss`

2. In `.prettierrc`, have this, but no `plugins` key (autoload should work):

{
	"pluginSearchDirs": ["."],
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
}

3. In VSCode settings:

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

It worked but I had to reload window.

[beeb]

not working for me :/

You might want to try disabling the pluginSearchDirs and specifying both plugins manually, with tailwind coming last:
https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins

[shamscorner]

For anyone stumbling upon this, here is what I had to do to make it work (using pnpm but not sure if relevant).

1. In project devDependencies, add both prettier-plugin-svelte and prettier-plugin-tailwindcss
2. In .prettierrc, have this, but no plugins key (autoload should work):

{
	"pluginSearchDirs": ["."],
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
}

3. In VSCode settings:

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

Only adding the vscode settings should solve the issue. No need to remove the plugins array and the pluginSearchDirs.

Here is my .prettierrc according to Tailwind Docs:

{
	"useTabs": true,
	"singleQuote": true,
	"trailingComma": "none",
	"printWidth": 80,
	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
	"pluginSearchDirs": false,
	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

Here are my full vscode settings under .vscode/settings.json project folder:

{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"[svelte]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"prettier.documentSelectors": ["**/*.svelte"],
	"eslint.validate": ["javascript", "typescript", "svelte"],
	"files.associations": {
		"*.css": "tailwindcss"
	},
	"editor.quickSuggestions": {
		"strings": true
	}
}

[opensas]

I guess I must be missing something rather obvious, but I'm following the docs and I can get ti to work

I created this question at SO with the detailed steps, but basically I cannot get prettier to format svelte files, I get a an "Extension 'Prettier - Code Formatter' is configured as formatter but it cannot format 'Svelte' files` error

And If I use the svelte.svelte-vscode as formatter classes don't get sorted.

I created this repo for testing, you can open it with gitpod, just open src/routes/+page.svelte, press F1, type format document and you'll get:

and if you run pnpm format classes are sorted accordingly.

---

I had to add "prettier.documentSelectors": ["**/*.svelte"] to ny vscode settings file.

I explained the issue here

this is how vscode settings ended up:

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

and my .prettierrc file:

{
    "useTabs": true,
    "singleQuote": true,
    "trailingComma": "none",
    "printWidth": 100,
    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
    "pluginSearchDirs": false,
    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

[dimitri-vs]

This is closed but figured I would share what ended up working for me.

The svelte plugin was seemingly working and the tailwindcss plugin was also working on .html files, but not on .svelte files.

I was able to finally get the classes to sort with the setup below and testing using the npx prettier --write "./src/lib/test.svelte" command.

In package.json > devDependencies I have:

    "prettier": "2.8.8",
    "prettier-plugin-svelte": "2.10.1",
    "prettier-plugin-tailwindcss": "0.4.0",

In .prettierrc.cjs I have:

module.exports = {
    // ...
    plugins: [
        require('prettier-plugin-svelte'),
        require('prettier-plugin-tailwindcss')
    ],
    overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
};

For settings.json to get the right click Format Document working I had to add this:

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

I have the Prettier and the Svelte for VS Code extensions installed.