Docs updated for new Tailwind plugin

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

Hide file tree

Showing 6 changed files with 36 additions and 93 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/next.skeleton.dev/astro.config.js b/sites/next.skeleton.dev/astro.config.js
@@ -1,27 +1,24 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
-import path from 'node:path';
+// import path from 'node:path';
 
 // Integrations
 import partytown from '@astrojs/partytown';
-import tailwind from '@astrojs/tailwind';
 import svelte from '@astrojs/svelte';
 import react from '@astrojs/react';
 import expressiveCode from 'astro-expressive-code';
 import icon from 'astro-icon';
 import AutoImport from 'astro-auto-import';
 import mdx from '@astrojs/mdx';
 // Vite Plugins
-import skeletonPluginWatcher from 'vite-plugin-tw-plugin-watcher';
+import tailwindcss from '@tailwindcss/vite';
 import pagefind from 'vite-plugin-pagefind';
 
 // https://astro.build/config
 export default defineConfig({
 	integrations: [
 		// https://docs.astro.build/en/guides/integrations-guide/partytown/
 		partytown(),
-		// https://docs.astro.build/en/guides/integrations-guide/tailwind/
-		tailwind(),
 		// https://docs.astro.build/en/guides/integrations-guide/svelte/
 		svelte(),
 		// https://docs.astro.build/en/guides/integrations-guide/react/
@@ -65,6 +62,11 @@ export default defineConfig({
 		mdx()
 	],
 	vite: {
-		plugins: [skeletonPluginWatcher(path.resolve(path.join('..', '..', 'packages', 'skeleton', 'src', 'plugin'))), pagefind()]
+		plugins: [
+			// https://tailwindcss.com/docs/installation/framework-guides/astro
+			tailwindcss(),
+			// https://pagefind.app/
+			pagefind()
+		]
 	}
 });
diff --git a/sites/next.skeleton.dev/package.json b/sites/next.skeleton.dev/package.json
@@ -26,13 +26,13 @@
 		"@astrojs/partytown": "^2.1.3",
 		"@astrojs/react": "^4.0.0",
 		"@astrojs/svelte": "^7.0.4",
-		"@astrojs/tailwind": "^5.1.3",
 		"@atproto/api": "^0.13.31",
 		"@floating-ui/react": "^0.26.28",
 		"@nanostores/persistent": "^0.10.2",
 		"@skeletonlabs/skeleton": "workspace:*",
 		"@skeletonlabs/skeleton-react": "workspace:*",
 		"@skeletonlabs/skeleton-svelte": "workspace:*",
+		"@tailwindcss/vite": "^4.0.2",
 		"@types/react": "^18.3.13",
 		"astro": "^5.0.2",
 		"astro-auto-import": "^0.4.4",
@@ -49,13 +49,12 @@
 		"sharp": "^0.33.5",
 		"svelte": "catalog:",
 		"svelte-check": "^4.1.1",
-		"tailwindcss": "^3.4.16",
+		"tailwindcss": "^4.0.6",
 		"typescript": "catalog:"
 	},
 	"devDependencies": {
 		"@clack/prompts": "^0.7.0",
 		"@tailwindcss/forms": "^0.5.9",
-		"@tailwindcss/typography": "^0.5.15",
 		"pagefind": "^1.2.0",
 		"tsx": "^4.19.2",
 		"vite-plugin-pagefind": "^0.2.10",

diff --git a/sites/next.skeleton.dev/src/layouts/LayoutRoot.astro b/sites/next.skeleton.dev/src/layouts/LayoutRoot.astro
@@ -19,7 +19,7 @@ const meta = {
 ---
 
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" data-theme="cerberus" class="dark">
 	<head>
 		<title>{meta.title}</title>
 		<link rel="icon" type="image/png" href="/favicon.png" />
@@ -72,7 +72,7 @@ const meta = {
 				};
 		</script>
 	</head>
-	<body class:list={[classList]} data-theme="cerberus">
+	<body class:list={[classList]}>
 		<slot />
 	</body>
 </html>
diff --git a/sites/next.skeleton.dev/src/styles/app.css b/sites/next.skeleton.dev/src/styles/app.css
@@ -1,3 +1,11 @@
+@import 'tailwindcss';
+
+@import '@skeletonlabs/skeleton';
+@import '@skeletonlabs/skeleton/themes/cerberus';
+@import '@skeletonlabs/skeleton/optional/presets';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* Global Styles */
 
 html {

diff --git a/sites/next.skeleton.dev/tailwind.config.js b/sites/next.skeleton.dev/tailwind.config.js