Tailwind CSS v4 (#562)

* Initial migration to Tailwind CSS v4 using `npx @tailwindcss/upgrade` (and some manual tweaks)

* Fix Gooey after bad tailwind upgrade

* fix: Fix theme page (svelte-check) by adding `@reference '../app.css`

* Format project (fix lint errors)

* fix(docs): Fix blur input labels (@tailwindcss/upgrade)

* Update `@layerstack/tailwind` and replace `tailwind.config.cjs` with css-based config

* Remove custom theming page (for now)

* Add changeset

* Update `@layerstack/*` packages to `-next` (Tailwind 4) versions

* Update tailwind 4 to latest

* fix(TextField): refine classes to for tailwind 4 changes

* docs(Gooey): Replace custom `bg-gradient-radial` with built-in `bg-radial` (tailwind 4)

Author: techniq

.changeset/ready-planets-deny.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': major
+---
+
+Tailwind 4 support

packages/svelte-ux/package.json

@@ -25,14 +25,14 @@
     "@sveltejs/kit": "^2.17.3",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
+    "@tailwindcss/postcss": "^4.0.12",
     "@tailwindcss/typography": "^0.5.16",
     "@types/culori": "^2.1.1",
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.9",
     "@types/lodash-es": "^4.17.12",
     "@types/prismjs": "^1.26.5",
     "@vitest/coverage-v8": "^3.0.7",
-    "autoprefixer": "^10.4.20",
     "daisyui": "^4.12.24",
     "marked": "^15.0.7",
     "mdsvex": "^0.12.3",
@@ -43,7 +43,7 @@
     "svelte": "5.20.4",
     "svelte-check": "^4.1.4",
     "svelte2tsx": "^0.7.34",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.12",
     "tslib": "^2.8.1",
     "typescript": "^5.7.3",
     "unist-util-visit": "^5.0.0",
@@ -54,11 +54,11 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
     "@fortawesome/fontawesome-common-types": "^6.7.2",
-    "@layerstack/svelte-actions": "^1.0.0",
-    "@layerstack/svelte-stores": "^1.0.1",
-    "@layerstack/svelte-table": "^1.0.0",
-    "@layerstack/tailwind": "^1.0.0",
-    "@layerstack/utils": "^1.0.0",
+    "@layerstack/svelte-actions": "^1.0.1-next.0",
+    "@layerstack/svelte-stores": "^1.0.2-next.0",
+    "@layerstack/svelte-table": "^1.0.1-next.0",
+    "@layerstack/tailwind": "^2.0.0-next.0",
+    "@layerstack/utils": "^1.1.0-next.0",
     "@mdi/js": "^7.4.47",
     "culori": "^4.0.1",
     "d3-array": "^3.2.4",

packages/svelte-ux/postcss.config.cjs

@@ -1,7 +1,5 @@
 module.exports = {
   plugins: {
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

packages/svelte-ux/src/docs/Blockquote.svelte

@@ -6,7 +6,7 @@
 
 <div
   class={cls(
-    'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded flex items-center gap-2 text-sm',
+    'bg-primary/10 border border-l-[6px] border-primary/30 border-l-primary text-primary px-4 py-2 my-4 rounded-sm flex items-center gap-2 text-sm',
     '[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
   )}
 >

packages/svelte-ux/src/docs/ViewSourceButton.svelte

@@ -20,9 +20,9 @@
     <Dialog
       {open}
       on:close={toggleOff}
-      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto,1fr,auto]"
+      class="max-h-[98dvh] md:max-h-[90dvh] max-w-[98vw] md:max-w-[90vw] grid grid-rows-[auto_1fr_auto]"
     >
-      <div class="grid grid-cols-[1fr,auto] gap-3 items-center p-4">
+      <div class="grid grid-cols-[1fr_auto] gap-3 items-center p-4">
         <div class="overflow-auto">
           <div class="text-lg font-semibold">{label}</div>
           <div class="text-xs text-surface-content/50 truncate">{href}</div>

packages/svelte-ux/src/lib/components/AppLayout.svelte

@@ -34,7 +34,7 @@
     headerPosition === 'full' || temporaryDrawer
       ? '[&>header]:w-full'
       : '[&>header]:w-[calc(100%-var(--drawerWidth))] [&>header]:left-[var(--drawerWidth)] [&>header]:duration-500',
-    '[&>main]:md:ml-[var(--drawerWidth)] [&>main]:mt-[var(--headerHeight)] [&>main]:transition-[margin] [&>main]:duration-500',
+    'md:[&>main]:ml-(--drawerWidth) [&>main]:mt-[var(--headerHeight)] [&>main]:transition-[margin] [&>main]:duration-500',
     /* Fix scrolling offset for headings (h1, ...) or other elements with an id set (`<a href="#id">`) */
     '[:where(&_[id])]:scroll-m-[var(--headerHeight)]',
     settingsClasses.root,

packages/svelte-ux/src/lib/components/Avatar.svelte

@@ -14,7 +14,7 @@
 <div
   class={cls(
     'Avatar',
-    'rounded-full inline-flex items-center justify-center flex-shrink-0',
+    'rounded-full inline-flex items-center justify-center shrink-0',
     {
       sm: 'w-6 h-6',
       md: 'w-10 h-10',

packages/svelte-ux/src/lib/components/Backdrop.svelte

@@ -19,7 +19,7 @@
   class={cls(
     'Backdrop',
     'fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-surface-content/50 dark:bg-surface-300/70',
-    blur && 'backdrop-blur-sm',
+    blur && 'backdrop-blur-xs',
     settingsClasses.root,
     className
   )}