Updated React and Svelte apps to Tailwind v4

skeletonlabs · Feb 12, 2025 · 9e4a96b · 9e4a96b
1 parent 5bd60e8
commit 9e4a96b
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 176 deletions.
diff --git a/packages/skeleton-react/index.html b/packages/skeleton-react/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" data-theme="cerberus" class="dark">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>skeleton-react</title>
 	</head>
 
-	<body data-theme="cerberus">
+	<body>
 		<div id="root"></div>
 		<script type="module" src="/src/main.tsx"></script>
 	</body>

diff --git a/packages/skeleton-react/package.json b/packages/skeleton-react/package.json
@@ -37,6 +37,7 @@
 		"!./dist/schemas.d.ts"
 	],
 	"dependencies": {
+		"@tailwindcss/vite": "^4.0.2",
 		"@zag-js/accordion": "catalog:",
 		"@zag-js/avatar": "catalog:",
 		"@zag-js/file-upload": "catalog:",
@@ -48,7 +49,8 @@
 		"@zag-js/slider": "catalog:",
 		"@zag-js/switch": "catalog:",
 		"@zag-js/tabs": "catalog:",
-		"@zag-js/tags-input": "catalog:"
+		"@zag-js/tags-input": "catalog:",
+		"tailwindcss": "^4.0.6"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0 || ^19.0.0",
@@ -63,18 +65,14 @@
 		"@types/react": "^18.3.13",
 		"@types/react-dom": "^18.3.1",
 		"@vitejs/plugin-react": "^4.3.4",
-		"autoprefixer": "^10.4.20",
 		"jsdom": "^25.0.1",
 		"lucide-react": "^0.465.0",
-		"postcss": "^8.4.49",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-router-dom": "^7.0.2",
-		"tailwindcss": "^3.4.16",
 		"typescript": "catalog:",
 		"vite": "^6.0.2",
 		"vite-plugin-remix-router": "^2.0.0",
-		"vite-plugin-tw-plugin-watcher": "workspace:*",
 		"vitest": "^2.1.8"
 	}
 }
diff --git a/packages/skeleton-react/postcss.config.js b/packages/skeleton-react/postcss.config.js
diff --git a/packages/skeleton-react/src/App.css b/packages/skeleton-react/src/App.css
@@ -1,6 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@import '@skeletonlabs/skeleton';
+@import '@skeletonlabs/skeleton/themes/cerberus';
+@import '@skeletonlabs/skeleton/optional/presets';
+
+@custom-variant dark (&:where(.dark, .dark *));
 
 .custom-indeterminate {
 	animation: custom-indeterminate 2s linear infinite;

diff --git a/packages/skeleton-react/tailwind.config.js b/packages/skeleton-react/tailwind.config.js
diff --git a/packages/skeleton-react/vite.config.ts b/packages/skeleton-react/vite.config.ts
@@ -1,8 +1,8 @@
 import { defineConfig, configDefaults } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import RemixRouter from 'vite-plugin-remix-router';
-import skeletonPluginWatcher from 'vite-plugin-tw-plugin-watcher';
 import path from 'node:path';
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,7 +11,8 @@ export default defineConfig({
 		react(),
 		// https://vite-remix-router.vercel.app/
 		RemixRouter(),
-		skeletonPluginWatcher(path.resolve(path.join('..', '..', 'packages', 'skeleton', 'src', 'plugin')))
+		// https://tailwindcss.com/docs/installation/using-vite
+		tailwindcss()
 	],
 	resolve: {
 		alias: {

diff --git a/packages/skeleton-svelte/package.json b/packages/skeleton-svelte/package.json
@@ -59,21 +59,18 @@
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.1",
 		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/vite": "^4.0.2",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.6",
-		"autoprefixer": "^10.4.19",
 		"jsdom": "^25.0.1",
 		"lucide-svelte": "^0.465.0",
-		"postcss": "^8.4.49",
-		"postcss-load-config": "^6.0.1",
 		"publint": "^0.2.12",
 		"svelte": "catalog:",
 		"svelte-check": "^4.1.1",
-		"tailwindcss": "^3.4.16",
+		"tailwindcss": "^4.0.6",
 		"tslib": "^2.8.1",
 		"typescript": "catalog:",
 		"vite": "^6.0.2",
-		"vite-plugin-tw-plugin-watcher": "workspace:*",
 		"vitest": "3.0.0-beta.1"
 	},
 	"type": "module"

diff --git a/packages/skeleton-svelte/postcss.config.cjs b/packages/skeleton-svelte/postcss.config.cjs
diff --git a/packages/skeleton-svelte/src/app.html b/packages/skeleton-svelte/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" data-theme="cerberus" class="dark">
 	<head>
 		<meta charset="utf-8" />
 		<title>skeleton-svelte</title>
@@ -8,7 +8,7 @@
 		%sveltekit.head%
 	</head>
 
-	<body data-sveltekit-preload-data="hover" data-theme="cerberus">
+	<body data-sveltekit-preload-data="hover">
 		<div>%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/packages/skeleton-svelte/src/app.pcss b/packages/skeleton-svelte/src/app.pcss
@@ -1,6 +1,10 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@import '@skeletonlabs/skeleton';
+@import '@skeletonlabs/skeleton/themes/cerberus';
+@import '@skeletonlabs/skeleton/optional/presets';
+
+@custom-variant dark (&:where(.dark, .dark *));
 
 html,
 body {

diff --git a/packages/skeleton-svelte/tailwind.config.js b/packages/skeleton-svelte/tailwind.config.js
diff --git a/packages/skeleton-svelte/vite.config.ts b/packages/skeleton-svelte/vite.config.ts
@@ -1,16 +1,10 @@
 import { defineConfig } from 'vitest/config';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { svelteTesting } from '@testing-library/svelte/vite';
-import skeletonPluginWatcher from 'vite-plugin-tw-plugin-watcher';
-
-import path from 'node:path';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-	plugins: [
-		sveltekit(),
-		svelteTesting(),
-		skeletonPluginWatcher(path.resolve(path.join('..', '..', 'packages', 'skeleton', 'src', 'plugin')))
-	],
+	plugins: [sveltekit(), svelteTesting(), tailwindcss()],
 	test: {
 		environment: 'jsdom',
 		setupFiles: ['./vitest.setup.js'],