How to add tailwind prettier plugin to sveltekit project with pnpm

sveltekit-tailwind-plugin.md

1. Install latest prettier and plugins

pnpm add -D prettier@latest prettier-plugin-svelte@latest prettier-plugin-tailwindcss@latest

2. Change the default .prettierrc to prettier.config.js and replace with the following.

/** @type {import("prettier").Config} */
export default {
	useTabs: true,
	singleQuote: true,
	trailingComma: 'none',
	printWidth: 80,
	plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
	overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
};

3. Rename the postcss.config.cjs to postcss.config.js.

/** @type {import("postcss-load-config").Config} */
export default {
	plugins: {
		tailwindcss: {},
		autoprefixer: {}
	}
};

4. .vscode/settings.json

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

5. Remove the node_modules

rm -rf node_modules/

6. Re-install everything again

pnpm install

7. Reload vscode. Ctrl + Shift + p - Developer: Reload Window