Migrated skeleton to v2 and dep updates

package.json

@@ -13,31 +13,32 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@floating-ui/dom": "^1.2.8",
-		"@skeletonlabs/skeleton": "^1.5.1",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.5.0",
-		"@tailwindcss/forms": "^0.5.3",
-		"@tailwindcss/typography": "^0.5.9",
-		"@types/chrome": "^0.0.236",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"autoprefixer": "^10.4.14",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.26.0",
-		"highlight.js": "^11.8.0",
-		"postcss": "^8.4.23",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.8.1",
-		"svelte": "^3.54.0",
-		"svelte-check": "^3.0.1",
+		"@floating-ui/dom": "^1.5.3",
+		"@skeletonlabs/skeleton": "^2.1.0",
+		"@skeletonlabs/tw-plugin": "^0.2.0",
+		"@sveltejs/adapter-auto": "^2.1.0",
+		"@sveltejs/kit": "^1.25.0",
+		"@tailwindcss/forms": "^0.5.6",
+		"@tailwindcss/typography": "^0.5.10",
+		"@types/chrome": "^0.0.246",
+		"@typescript-eslint/eslint-plugin": "^6.7.0",
+		"@typescript-eslint/parser": "^6.7.0",
+		"autoprefixer": "^10.4.15",
+		"eslint": "^8.49.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-svelte": "^2.33.1",
+		"postcss": "^8.4.29",
+		"prettier": "^3.0.3",
+		"prettier-plugin-svelte": "^3.0.3",
+		"svelte": "^4.2.0",
+		"svelte-check": "^3.5.1",
 		"sveltekit-adapter-chrome-extension": "^2.0.0",
-		"tailwindcss": "^3.3.2",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.3.0",
-		"vitest": "^0.25.3"
+		"tailwindcss": "^3.3.3",
+		"tslib": "^2.6.2",
+		"typescript": "^5.2.2",
+		"vite": "^4.4.9",
+		"vite-plugin-tailwind-purgecss": "^0.1.3",
+		"vitest": "^0.34.4"
 	},
 	"type": "module"
 }

src/app.postcss

@@ -1,3 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
 html,
 body {
 	@apply !h-[600px] !w-[800px];

src/routes/+layout.svelte

@@ -1,9 +1,4 @@
 <script lang='ts'>
-	// The ordering of these imports is critical to your app working properly
-	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
-	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
-	import '@skeletonlabs/skeleton/styles/skeleton.css';
-	// Most of your app wide CSS should be put in this file
 	import '../app.postcss';
 	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
 </script>

tailwind.config.cjs

@@ -1,9 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	darkMode: 'class',
-	content: ['./src/**/*.{html,js,svelte,ts}', require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
-	theme: {
-		extend: {},
-	},
-	plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography'),...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()],
-}

tailwind.config.ts

@@ -0,0 +1,17 @@
+import { join } from 'path';
+import type { Config } from 'tailwindcss';
+import { skeleton } from '@skeletonlabs/tw-plugin';
+
+const config = {
+	darkMode: 'class',
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
+	],
+	theme: {
+		extend: {}
+	},
+	plugins: [skeleton({ themes: { preset: ['skeleton'] } })]
+} satisfies Config;
+
+export default config;

vite.config.ts

@@ -1,8 +1,9 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [sveltekit(), purgeCss()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	}