Install

Create sveltekit project

npm create svelte@latest

Add TailwindCSS

npx svelte-add@latest tailwindcss
pnpm i tailwindcss@latest -D

Enable debugger

const config = {
  // ...
  vitePlugin: {
	     inspector: true
  },
}

The debugger can be enabled using Meta + Shift (Ctrl + Shift on windows)

Autostart devserver on project open

{
	"version": "2.0.0",
	"tasks": [
		{
			"label": "Run dev server on startup",
			"type": "shell",
			"command": "npm run dev",
			"windows": {
				"command": "npm run dev"
			},
			"presentation": {
				"reveal": "always",
				"panel": "new"
			},
			"runOptions": { "runOn": "folderOpen" }
		}
	]
}

If you want your website to automatically open, edit the dev script in your package.json to this

svelte-kit dev --open

Debugging

run npm --node-options --inspect run dev and open the devtools in the browser, you should have a small node icon at the top left where you can attach to the debugger