Skip to content

Instantly share code, notes, and snippets.

@kevinmungai

kevinmungai/sveltekit-tailwind-plugin.md

Last active April 5, 2024 07:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kevinmungai/3bed61845d5ca8c60f5d9cf4c581df1d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kevinmungai/3bed61845d5ca8c60f5d9cf4c581df1d to your computer and use it in GitHub Desktop.
Download ZIP
How to add tailwind prettier plugin to sveltekit project with pnpm
Raw
sveltekit-tailwind-plugin.md
  1. Install latest prettier and plugins
pnpm add -D prettier@latest prettier-plugin-svelte@latest prettier-plugin-tailwindcss@latest
  1. 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' } }]
};
  1. Rename the postcss.config.cjs to postcss.config.js.
/** @type {import("postcss-load-config").Config} */
export default {
	plugins: {
		tailwindcss: {},
		autoprefixer: {}
	}
};
  1. .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.documentSelectors": ["**/*.svelte", "**/*.js", "**/*.ts"],
  "[svelte]": {
	"editor.defaultFormatter": "svelte.svelte-vscode"
  },
}
  1. Remove the node_modules
rm -rf node_modules/
  1. Re-install everything again
pnpm install
  1. Reload vscode. Ctrl + Shift + p - Developer: Reload Window
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment