Merge pull request #2539 from garden-co/changeset-release/main

Version Packages

.github/workflows/build-examples.yaml

@@ -10,15 +10,9 @@ jobs:
     strategy:
       matrix:
         example: [
-          "chat",
-          "clerk",
-          "passkey",
-          "inspector",
-          "music-player",
-          "password-manager",
-          "pets",
-          "reactions",
-          "todo",
+          "passkey-svelte",
+          "chat-svelte",
+          "file-share-svelte",
         ]
 
     steps:

.github/workflows/build-starters.yaml

@@ -1,26 +0,0 @@
-name: Build Starters
-
-on:
-  push:
-    branches: ["main"]
-
-jobs:
-  build-starters:
-    runs-on: blacksmith-4vcpu-ubuntu-2204
-    strategy:
-      matrix:
-        starter: ["react-passkey-auth", "svelte-passkey-auth"]
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          submodules: true
-
-      - name: Setup Source Code
-        uses: ./.github/actions/source-code/
-
-      - name: Pnpm Build
-        run: |
-          pnpm install
-          pnpm turbo build;
-        working-directory: ./starters/${{ matrix.starter }}

examples/chat-rn-expo-clerk/package.json

@@ -16,7 +16,6 @@
     "@bacons/text-decoder": "0.0.0",
     "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@clerk/clerk-expo": "^2.2.21",
-    "@craftzdog/react-native-buffer": "6.0.5",
     "@expo/vector-icons": "^14.1.0",
     "@react-native-community/netinfo": "11.4.1",
     "@react-navigation/native": "7.0.19",

examples/chat-rn-expo-clerk/polyfills.js

@@ -3,9 +3,6 @@
 // @ts-expect-error - @types/react-native doesn't cover this file
 import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
 
-import { Buffer } from "@craftzdog/react-native-buffer";
-polyfillGlobal("Buffer", () => Buffer);
-
 // @ts-expect-error - @types/readable-stream doesn't have ReadableStream type
 import { ReadableStream } from "readable-stream";
 polyfillGlobal("ReadableStream", () => ReadableStream);

examples/chat-rn-expo/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@bacons/text-decoder": "^0.0.0",
-    "@craftzdog/react-native-buffer": "^6.0.5",
+    "@bam.tech/react-native-image-resizer": "^3.0.11",
     "@react-native-community/netinfo": "11.4.1",
     "expo": "~53.0.9",
     "expo-clipboard": "^7.1.4",

examples/chat-rn-expo/polyfills.ts

@@ -3,9 +3,6 @@
 // @ts-expect-error - @types/react-native doesn't cover this file
 import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
 
-import { Buffer } from "@craftzdog/react-native-buffer";
-polyfillGlobal("Buffer", () => Buffer);
-
 // @ts-expect-error - @types/readable-stream doesn't have ReadableStream type
 import { ReadableStream } from "readable-stream";
 polyfillGlobal("ReadableStream", () => ReadableStream);

examples/chat-rn/package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@bacons/text-decoder": "0.0.0",
-    "@craftzdog/react-native-buffer": "6.0.5",
     "@op-engineering/op-sqlite": "^11.4.8",
     "@react-native-clipboard/clipboard": "1.16.1",
     "@react-native-community/netinfo": "11.4.1",

examples/chat-rn/src/polyfills.ts

@@ -4,9 +4,6 @@
 import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
 // import 'react-native-polyfill-globals/auto';
 
-import { Buffer } from "@craftzdog/react-native-buffer";
-polyfillGlobal("Buffer", () => Buffer);
-
 // @ts-expect-error - @types/readable-stream doesn't have ReadableStream type
 import { ReadableStream } from "readable-stream";
 polyfillGlobal("ReadableStream", () => ReadableStream);

examples/chat-svelte/CHANGELOG.md

@@ -1,5 +1,14 @@
 # passkey-svelte
 
+## 0.0.86
+
+### Patch Changes
+
+- Updated dependencies [e35a380]
+  - jazz-svelte@0.14.26
+  - jazz-tools@0.14.26
+  - jazz-browser-media-images@0.14.26
+
 ## 0.0.85
 
 ### Patch Changes

examples/chat-svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chat-svelte",
-  "version": "0.0.85",
+  "version": "0.0.86",
   "type": "module",
   "private": true,
   "scripts": {

examples/chat-vue/package.json

@@ -24,12 +24,12 @@
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.7.0",
     "eslint-plugin-vue": "^9.28.0",
     "npm-run-all2": "^6.2.3",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.40",
+    "@tailwindcss/postcss": "^4.1.10",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5",
     "vite-plugin-vue-devtools": "^7.4.6",

examples/chat-vue/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/chat-vue/src/index.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

examples/chat-vue/tailwind.config.ts

@@ -1,11 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-
-export default config;

examples/chat/job-template.nomad

@@ -1,56 +0,0 @@
-job "chat$BRANCH_SUFFIX" {
-  region     = "global"
-  datacenters = ["*"]
-
-  group "static" {
-    count = 4
-
-    network {
-      port "http" {
-        to = 80
-      }
-    }
-
-    constraint {
-      attribute = "${node.class}"
-      operator  = "="
-      value     = "cloud"
-    }
-
-    spread {
-      attribute = "${node.datacenter}"
-      weight    = 100
-    }
-
-    constraint {
-      distinct_hosts = true
-    }
-
-    task "server" {
-      driver = "docker"
-
-      config {
-        image = "$DOCKER_TAG"
-        ports = ["http"]
-
-        auth = {
-          username = "$DOCKER_USER"
-          password = "$DOCKER_PASSWORD"
-        }
-      }
-
-      service {
-        tags = ["public"]
-        name = "chat$BRANCH_SUFFIX"
-        port = "http"
-        provider = "consul"
-      }
-
-      resources {
-        cpu    = 50 # MHz
-        memory = 50 # MB
-      }
-    }
-  }
-}
-# deploy bump 4

examples/chat/package.json

@@ -24,13 +24,13 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react-swc": "^3.10.1",
-    "autoprefixer": "^10.4.20",
     "is-ci": "^3.0.1",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5"
   }

examples/chat/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/chat/src/index.css

@@ -1,3 +1,54 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+/* Custom stone color palette */
+@theme {
+  --color-stone-50: oklch(0.988281 0.002 75);
+  --color-stone-75: oklch(0.980563 0.002 75);
+  --color-stone-100: oklch(0.964844 0.002 75);
+  --color-stone-200: oklch(0.917969 0.002 75);
+  --color-stone-300: oklch(0.853516 0.002 75);
+  --color-stone-400: oklch(0.789063 0.002 75);
+  --color-stone-500: oklch(0.726563 0.002 75);
+  --color-stone-600: oklch(0.613281 0.002 75);
+  --color-stone-700: oklch(0.523438 0.002 75);
+  --color-stone-800: oklch(0.412109 0.002 75);
+  --color-stone-900: oklch(0.302734 0.002 75);
+  --color-stone-925: oklch(0.22 0.002 75);
+  --color-stone-950: oklch(0.193359 0.002 75);
+
+  /* Blue color overrides */
+  --color-blue-50: #eef2ff;
+  --color-blue-100: #e0e7ff;
+  --color-blue-200: #c7d2fe;
+  --color-blue-300: #a5b4fc;
+  --color-blue-400: #818cf8;
+  --color-blue-500: #5870f1;
+  --color-blue-600: #5145cd;
+  --color-blue-700: #4338ca;
+  --color-blue-800: #3730a3;
+  --color-blue-900: #312e81;
+  --color-blue-950: #1e1b4b;
+  --color-blue: #146aff;
+}
+
+@layer base {
+  *:focus {
+    outline: none;
+  }
+
+  :root {
+    --border-default: var(--color-stone-200);
+  }
+
+  .dark {
+    --border-default: var(--color-stone-900);
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--border-default, currentColor);
+  }
+}

examples/chat/src/ui.tsx

@@ -86,7 +86,7 @@ export function BubbleImage(props: { image: ImageDefinition }) {
     <ProgressiveImg image={props.image}>
       {({ src }) => (
         <img
-          className="h-auto max-h-[20rem] max-w-full rounded-t-xl mb-1"
+          className="h-auto max-h-80 max-w-full rounded-t-xl mb-1"
           src={src}
         />
       )}

examples/chat/tailwind.config.ts

@@ -1,67 +0,0 @@
-import type { Config } from "tailwindcss";
-import plugin from "tailwindcss/plugin";
-const colors = require("tailwindcss/colors");
-
-const stonePalette = {
-  50: "oklch(0.988281 0.002 75)",
-  75: "oklch(0.980563 0.002 75)",
-  100: "oklch(0.964844 0.002 75)",
-  200: "oklch(0.917969 0.002 75)",
-  300: "oklch(0.853516 0.002 75)",
-  400: "oklch(0.789063 0.002 75)",
-  500: "oklch(0.726563 0.002 75)",
-  600: "oklch(0.613281 0.002 75)",
-  700: "oklch(0.523438 0.002 75)",
-  800: "oklch(0.412109 0.002 75)",
-  900: "oklch(0.302734 0.002 75)",
-  925: "oklch(0.220000 0.002 75)",
-  950: "oklch(0.193359 0.002 75)",
-} as const;
-
-const stonePaletteWithAlpha = { ...stonePalette };
-
-Object.keys(stonePalette).forEach((key) => {
-  stonePaletteWithAlpha[key] = stonePaletteWithAlpha[key].replace(
-    ")",
-    "/ <alpha-value>)",
-  );
-});
-
-const config: Config = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        stone: stonePaletteWithAlpha,
-        blue: {
-          ...colors.indigo,
-          500: "#5870F1",
-          DEFAULT: "#146AFF",
-        },
-      },
-      container: {
-        center: true,
-        padding: {
-          DEFAULT: "0.75rem",
-          sm: "1rem",
-        },
-        screens: {
-          md: "500px",
-          lg: "500px",
-          xl: "500px",
-        },
-      },
-    },
-  },
-  plugins: [
-    plugin(({ addBase }) =>
-      addBase({
-        "*:focus": {
-          outline: "none",
-        },
-      }),
-    ),
-  ],
-} as const;
-
-export default config;

examples/file-share-svelte/package.json

@@ -20,7 +20,6 @@
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "@types/is-ci": "^3.0.4",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.36.0",
@@ -31,7 +30,8 @@
     "prettier-plugin-tailwindcss": "^0.6.5",
     "svelte": "^5.33.0",
     "svelte-check": "^4.0.0",
-    "tailwindcss": "^3.4.17",
+    "@tailwindcss/postcss": "^4.1.10",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "typescript-eslint": "^8.0.0",
     "vite": "6.3.5"

examples/file-share-svelte/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
+    "@tailwindcss/postcss": {},
+  },
 };

examples/file-share-svelte/src/app.css

@@ -1,3 +1 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';

examples/file-share-svelte/src/routes/+page.svelte

@@ -66,7 +66,7 @@
 </script>
 
 <div class="min-h-screen bg-gray-50">
-  <div class="container mx-auto max-w-4xl px-4 py-8">
+  <div class="mx-auto max-w-4xl px-4 py-8">
     <div class="mb-12 flex items-center justify-between">
       <div>
         <h1 class="mb-2 text-4xl font-bold text-gray-900">File Share</h1>

examples/file-share-svelte/src/routes/file/[fileId]/+page.svelte

@@ -51,7 +51,7 @@
 </svelte:head>
 
 {#if file.current}
-  <div class="container mx-auto max-w-3xl p-4">
+  <div class="mx-auto max-w-3xl p-4">
     <div class="rounded-lg bg-white p-6 shadow-md">
       <div class="mb-6 flex items-center justify-between">
         <div class="flex items-center gap-3">
@@ -88,7 +88,7 @@
     </div>
   </div>
 {:else}
-  <div class="container mx-auto max-w-3xl p-4">
+  <div class="mx-auto max-w-3xl p-4">
     <div class="rounded-lg bg-white p-6 shadow-md">
       <p class="text-gray-600">Loading file...</p>
     </div>

examples/file-share-svelte/tailwind.config.ts

@@ -1,12 +0,0 @@
-import typography from '@tailwindcss/typography';
-import type { Config } from 'tailwindcss';
-
-export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-
-  theme: {
-    extend: {}
-  },
-
-  plugins: [typography]
-} satisfies Config;

examples/filestream/package.json

@@ -10,22 +10,22 @@
     "format-and-lint:fix": "biome check . --write"
   },
   "dependencies": {
+    "jazz-inspector": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
-    "jazz-inspector": "workspace:*",
     "react": "19.0.0",
     "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
-    "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",
     "postcss": "^8.5.3",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5"
   }

examples/filestream/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/filestream/src/App.tsx

@@ -4,7 +4,7 @@ import { Logo } from "./Logo.tsx";
 function App() {
   return (
     <>
-      <main className="container mt-16 flex flex-col gap-8">
+      <main className="max-w-3xl mx-auto px-3 mt-16 flex flex-col gap-8">
         <Logo />
         <FileWidget />
       </main>

examples/filestream/src/index.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

examples/filestream/tailwind.config.ts

@@ -1,23 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      container: {
-        center: true,
-        padding: {
-          DEFAULT: "0.75rem",
-          sm: "1rem",
-        },
-        screens: {
-          lg: "600px",
-          xl: "600px",
-        },
-      },
-    },
-  },
-  plugins: [],
-} as const;
-
-export default config;

examples/form/package.json

@@ -20,15 +20,15 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@playwright/test": "^1.50.1",
-    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
-    "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5"
   }

examples/form/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/form/src/App.tsx

@@ -8,7 +8,7 @@ function App() {
 
   return (
     <>
-      <main className="container py-8 space-y-8">
+      <main className="max-w-xl mx-auto px-3 py-8 space-y-8">
         {router.route({
           "/": () => <Orders />,
           "/order": () => <CreateOrder />,

examples/form/src/index.css

@@ -1,13 +1,22 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
 
-:root {
-  --border-default: theme("colors.stone.200");
-}
+@layer base {
+  :root {
+    --border-default: var(--color-stone-200);
+  }
 
-.dark {
-  --border-default: theme("colors.stone.900");
+  .dark {
+    --border-default: var(--color-stone-900);
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--border-default, currentColor);
+  }
 }
 
 @layer components {

examples/form/tailwind.config.ts

@@ -1,66 +0,0 @@
-import formsPlugin from "@tailwindcss/forms";
-import type { Config } from "tailwindcss";
-import plugin from "tailwindcss/plugin";
-
-const stonePalette = {
-  50: "oklch(0.988281 0.002 75)",
-  75: "oklch(0.980563 0.002 75)",
-  100: "oklch(0.964844 0.002 75)",
-  200: "oklch(0.917969 0.002 75)",
-  300: "oklch(0.853516 0.002 75)",
-  400: "oklch(0.789063 0.002 75)",
-  500: "oklch(0.726563 0.002 75)",
-  600: "oklch(0.613281 0.002 75)",
-  700: "oklch(0.523438 0.002 75)",
-  800: "oklch(0.412109 0.002 75)",
-  900: "oklch(0.302734 0.002 75)",
-  925: "oklch(0.220000 0.002 75)",
-  950: "oklch(0.193359 0.002 75)",
-} as const;
-
-const stonePaletteWithAlpha = { ...stonePalette };
-
-Object.keys(stonePalette).forEach((key) => {
-  stonePaletteWithAlpha[key] = stonePaletteWithAlpha[key].replace(
-    ")",
-    "/ <alpha-value>)",
-  );
-});
-
-const config: Config = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        stone: stonePaletteWithAlpha,
-      },
-      borderColor: {
-        default: "var(--border-default)",
-      },
-      container: {
-        center: true,
-        padding: {
-          DEFAULT: "0.75rem",
-          sm: "1rem",
-        },
-        screens: {
-          md: "500px",
-          lg: "500px",
-          xl: "500px",
-        },
-      },
-    },
-  },
-  plugins: [
-    formsPlugin,
-    plugin(({ addBase }) =>
-      addBase({
-        "*:focus": {
-          outline: "none",
-        },
-      }),
-    ),
-  ],
-} as const;
-
-export default config;

examples/image-upload/package.json

@@ -18,14 +18,14 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
     "globals": "^15.11.0",
     "typescript": "5.6.2",
     "vite": "6.3.5",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17"
+    "postcss": "^8.4.40",
+    "tailwindcss": "^4.1.10"
   }
 }

examples/image-upload/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/image-upload/src/App.tsx

@@ -3,7 +3,7 @@ import ImageUpload from "./ImageUpload.tsx";
 function App() {
   return (
     <>
-      <main className="container py-16">
+      <main className="max-w-3xl mx-auto px-3 py-16">
         <ImageUpload />
       </main>
     </>

examples/image-upload/src/ImageUpload.tsx

@@ -59,7 +59,11 @@ export default function ImageUpload() {
           {({ src }) => <img alt="" src={src} className="w-full h-auto" />}
         </ProgressiveImg>
 
-        <button type="button" onClick={deleteImage} className="mt-5">
+        <button
+          type="button"
+          onClick={deleteImage}
+          className="mt-5 bg-blue-600 text-white py-2 px-3 rounded"
+        >
           Delete image
         </button>
       </>

examples/image-upload/src/index.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

examples/image-upload/tailwind.config.ts

@@ -1,18 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      container: {
-        center: true,
-        padding: {
-          DEFAULT: "0.75rem",
-          sm: "1rem",
-        },
-      },
-    },
-  },
-} as const;
-
-export default config;

examples/inspector/job-template.nomad

@@ -1,56 +0,0 @@
-job "inspector$BRANCH_SUFFIX" {
-  region     = "global"
-  datacenters = ["*"]
-
-  group "static" {
-    count = 4
-
-    network {
-      port "http" {
-        to = 80
-      }
-    }
-
-    constraint {
-      attribute = "${node.class}"
-      operator  = "="
-      value     = "cloud"
-    }
-
-    spread {
-      attribute = "${node.datacenter}"
-      weight    = 100
-    }
-
-    constraint {
-      distinct_hosts = true
-    }
-
-    task "server" {
-      driver = "docker"
-
-      config {
-        image = "$DOCKER_TAG"
-        ports = ["http"]
-
-        auth = {
-          username = "$DOCKER_USER"
-          password = "$DOCKER_PASSWORD"
-        }
-      }
-
-      service {
-        tags = ["public"]
-        name = "inspector$BRANCH_SUFFIX"
-        port = "http"
-        provider = "consul"
-      }
-
-      resources {
-        cpu    = 50 # MHz
-        memory = 50 # MB
-      }
-    }
-  }
-}
-# deploy bump 4

examples/inspector/package.json

@@ -12,24 +12,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "jazz-inspector": "workspace:*",
-    "jazz-tools": "workspace:*",
     "clsx": "^2.0.0",
     "cojson": "workspace:*",
     "cojson-transport-ws": "workspace:*",
     "hash-slash": "workspace:*",
+    "jazz-inspector": "workspace:*",
+    "jazz-tools": "workspace:*",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-use": "^17.4.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react-swc": "^3.10.1",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5"
   }

examples/inspector/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/inspector/src/index.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

examples/inspector/src/viewer/new-app.tsx

@@ -171,7 +171,7 @@ export default function CoJsonViewerApp() {
           <form onSubmit={handleCoValueIdSubmit}>
             {path.length !== 0 && (
               <Input
-                className="min-w-[21rem] font-mono"
+                className="min-w-84 font-mono"
                 placeholder="co_z1234567890abcdef123456789"
                 label="CoValue ID"
                 hideLabel
@@ -333,7 +333,7 @@ function AddAccountForm({
   return (
     <form
       onSubmit={handleSubmit}
-      className={`flex flex-col max-w-[30rem] mx-auto justify-center ${errors == null ? "h-full" : ""}`}
+      className={`flex flex-col max-w-120 mx-auto justify-center ${errors == null ? "h-full" : ""}`}
     >
       {errors != null && (
         <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mt-4 font-mono whitespace-pre-wrap break-words mb-8">

examples/inspector/tailwind.config.ts

@@ -1,68 +0,0 @@
-import type { Config } from "tailwindcss";
-import plugin from "tailwindcss/plugin";
-
-const stonePalette = {
-  50: "oklch(0.988281 0.002 75)",
-  100: "oklch(0.980563 0.002 75)",
-  200: "oklch(0.917969 0.002 75)",
-  300: "oklch(0.853516 0.002 75)",
-  400: "oklch(0.789063 0.002 75)",
-  500: "oklch(0.726563 0.002 75)",
-  600: "oklch(0.613281 0.002 75)",
-  700: "oklch(0.523438 0.002 75)",
-  800: "oklch(0.412109 0.002 75)",
-  900: "oklch(0.302734 0.002 75)",
-  925: "oklch(0.220000 0.002 75)",
-  950: "oklch(0.193359 0.002 75)",
-};
-
-const stonePaletteWithAlpha = { ...stonePalette };
-
-Object.keys(stonePalette).forEach((key) => {
-  // @ts-ignore
-  stonePaletteWithAlpha[key] = stonePaletteWithAlpha[key].replace(
-    ")",
-    "/ <alpha-value>)",
-  );
-});
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        stone: stonePaletteWithAlpha,
-        gray: stonePaletteWithAlpha,
-        blue: {
-          50: "#f5f7ff",
-          100: "#ebf0fe",
-          200: "#d6e0fd",
-          300: "#b3c7fc",
-          400: "#8aa6f9",
-          500: "#5870F1",
-          600: "#3651E7",
-          700: "#3313F7",
-          800: "#2A12BE",
-          900: "#12046A",
-          950: "#1e1b4b",
-          DEFAULT: "#146AFF",
-        },
-      },
-    },
-  },
-  plugins: [plugin(({ addVariant }) => addVariant("label", "& :is(label)"))],
-};
-
-export default config;

examples/jazz-nextjs/package.json

@@ -8,19 +8,19 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.3.2",
     "jazz-inspector": "workspace:*",
     "jazz-react": "workspace:*",
-    "jazz-tools": "workspace:*"
+    "jazz-tools": "workspace:*",
+    "next": "15.3.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4"
+    "tailwindcss": "^4.1.10",
+    "typescript": "^5"
   }
 }

examples/multi-cursors/package.json

@@ -24,11 +24,11 @@
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
-    "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.40",
+    "@tailwindcss/postcss": "^4.1.10",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5",
     "vitest": "3.1.1"

examples/multi-cursors/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/multi-cursors/src/index.css

@@ -1,3 +1,19 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@layer base {
+  :root {
+    --border-default: var(--color-stone-200);
+  }
+
+  .dark {
+    --border-default: var(--color-stone-900);
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--border-default, currentColor);
+  }
+}

examples/multi-cursors/tailwind.config.ts

@@ -1,23 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      container: {
-        center: true,
-        padding: {
-          DEFAULT: "0.75rem",
-          sm: "1rem",
-        },
-        screens: {
-          lg: "600px",
-          xl: "600px",
-        },
-      },
-    },
-  },
-  plugins: [],
-} as const;
-
-export default config;

examples/multiauth/package.json

@@ -11,12 +11,13 @@
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.4.1",
-    "jazz-react": "workspace:*",
     "jazz-inspector": "workspace:*",
+    "jazz-react": "workspace:*",
     "jazz-react-auth-clerk": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "react-dom": "19.0.0",
+    "tailwindcss": "^4.1.10"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

examples/multiauth/src/components/Home.tsx

@@ -17,7 +17,7 @@ export function Home() {
         gap: "1rem",
       }}
     >
-      <div className="container">
+      <div className="max-w-2xl mx-auto">
         <h1>You're logged in</h1>
         <p>Welcome back, {me?.profile?.name}</p>
         <button onClick={() => logOut()}>Logout</button>

examples/music-player/job-template.nomad

@@ -1,56 +0,0 @@
-job "example-musicPlayer$BRANCH_SUFFIX" {
-  region     = "global"
-  datacenters = ["*"]
-
-  group "static" {
-    count = 4
-
-    network {
-      port "http" {
-        to = 80
-      }
-    }
-
-    constraint {
-      attribute = "${node.class}"
-      operator  = "="
-      value     = "cloud"
-    }
-
-    spread {
-      attribute = "${node.datacenter}"
-      weight    = 100
-    }
-
-    constraint {
-      distinct_hosts = true
-    }
-
-    task "server" {
-      driver = "docker"
-
-      config {
-        image = "$DOCKER_TAG"
-        ports = ["http"]
-
-        auth = {
-          username = "$DOCKER_USER"
-          password = "$DOCKER_PASSWORD"
-        }
-      }
-
-      service {
-        tags = ["public"]
-        name = "example-pets$BRANCH_SUFFIX"
-        port = "http"
-        provider = "consul"
-      }
-
-      resources {
-        cpu    = 50 # MHz
-        memory = 50 # MB
-      }
-    }
-  }
-}
-# deploy bump 4

examples/music-player/package.json

@@ -12,15 +12,15 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-toast": "^1.1.4",
-    "@radix-ui/react-tooltip": "^1.1.6",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "jazz-inspector": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
@@ -29,17 +29,16 @@
     "react-dom": "19.0.0",
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwind-merge": "^1.14.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react-swc": "^3.10.1",
-    "autoprefixer": "^10.4.20",
     "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5"
   }

examples/music-player/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/music-player/src/components/MusicTrackTitleInput.tsx

@@ -31,7 +31,7 @@ export function MusicTrackTitleInput({
 
   return (
     <div
-      className="relative flex-grow max-w-64"
+      className="relative grow max-w-64"
       onClick={(evt) => evt.stopPropagation()}
     >
       <input

examples/music-player/src/components/Waveform.tsx

@@ -50,8 +50,8 @@ export function Waveform(props: {
           className={cn(
             "w-1 transition-colors rounded-none rounded-t-lg min-h-1",
             activeBar >= i ? "bg-gray-500" : "bg-gray-300",
-            "hover:bg-black hover:border-1 hover:border-solid hover:border-black",
-            "focus-visible:outline-black focus:outline-none",
+            "hover:bg-black hover:border hover:border-solid hover:border-black",
+            "focus-visible:outline-black focus:outline-hidden",
           )}
           style={{
             height: height * value,

examples/music-player/src/components/ui/badge.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {

examples/music-player/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

examples/music-player/src/components/ui/dialog.tsx

@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

examples/music-player/src/components/ui/dropdown-menu.tsx

@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
       className,
     )}
@@ -45,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}
@@ -63,7 +63,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}
@@ -81,7 +81,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className,
     )}
@@ -97,7 +97,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     checked={checked}
@@ -121,7 +121,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}

examples/music-player/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}

examples/music-player/src/components/ui/separator.tsx

@@ -17,7 +17,7 @@ const Separator = React.forwardRef<
       orientation={orientation}
       className={cn(
         "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
         className,
       )}
       {...props}

examples/music-player/src/components/ui/sheet.tsx

@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>

examples/music-player/src/components/ui/sidebar.tsx

@@ -153,7 +153,7 @@ const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
               className,
             )}
             ref={ref}
@@ -193,7 +193,7 @@ const Sidebar = React.forwardRef<
       return (
         <div
           className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
             className,
           )}
           ref={ref}
@@ -210,7 +210,7 @@ const Sidebar = React.forwardRef<
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
             style={
               {
                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -240,31 +240,31 @@ const Sidebar = React.forwardRef<
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={cn(
-            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
             "group-data-[collapsible=offcanvas]:w-0",
             "group-data-[side=right]:rotate-180",
             variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
           )}
         />
         <div
           className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
             side === "left"
               ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
               : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
             // Adjust the padding for floating and inset variants.
             variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
             className,
           )}
           {...props}
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
           >
             {children}
           </div>
@@ -317,9 +317,9 @@ const SidebarRail = React.forwardRef<
       title="Toggle Sidebar"
       className={cn(
         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className,
@@ -339,7 +339,7 @@ const SidebarInset = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex w-full flex-1 flex-col bg-background",
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
         className,
       )}
       {...props}
@@ -455,7 +455,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className,
       )}
@@ -476,9 +476,9 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
+        "after:absolute after:-inset-2 md:after:hidden",
         "group-data-[collapsible=icon]:hidden",
         className,
       )}
@@ -528,7 +528,7 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -539,7 +539,7 @@ const sidebarMenuButtonVariants = cva(
       size: {
         default: "h-8 text-sm",
         sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {
@@ -622,9 +622,9 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
+        "after:absolute after:-inset-2 md:after:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
         "peer-data-[size=default]/menu-button:top-1.5",
         "peer-data-[size=lg]/menu-button:top-2.5",
@@ -685,7 +685,7 @@ const SidebarMenuSkeleton = React.forwardRef<
         />
       )}
       <Skeleton
-        className="h-4 max-w-[--skeleton-width] flex-1"
+        className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
         style={
           {
@@ -738,7 +738,7 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",

examples/music-player/src/components/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className,
     )}
     {...props}
@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
       className,
     )}
     {...props}
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
       className,
     )}
     toast-close=""

examples/music-player/src/components/ui/tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin)",
       className,
     )}
     {...props}

examples/music-player/src/index.css

@@ -1,92 +1,175 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
+@custom-variant dark (&:is(.dark *));
 
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(20 14.3% 4.1%);
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(20 14.3% 4.1%);
 
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(20 14.3% 4.1%);
 
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
+  --primary: hsl(24 9.8% 10%);
+  --primary-foreground: hsl(60 9.1% 97.8%);
 
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
+  --secondary: hsl(60 4.8% 95.9%);
+  --secondary-foreground: hsl(24 9.8% 10%);
 
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
+  --muted: hsl(60 4.8% 95.9%);
+  --muted-foreground: hsl(25 5.3% 44.7%);
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
+  --accent: hsl(60 4.8% 95.9%);
+  --accent-foreground: hsl(24 9.8% 10%);
 
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 20 14.3% 4.1%;
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(60 9.1% 97.8%);
 
-    --radius: 0.5rem;
+  --border: hsl(20 5.9% 90%);
+  --input: hsl(20 5.9% 90%);
+  --ring: hsl(20 14.3% 4.1%);
 
-    --sidebar-background: 0 0% 98%;
+  --radius: 0.5rem;
 
-    --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-background: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
 
-    --sidebar-primary: 240 5.9% 10%;
+.dark {
+  --background: hsl(20 14.3% 4.1%);
+  --foreground: hsl(60 9.1% 97.8%);
 
-    --sidebar-primary-foreground: 0 0% 98%;
+  --card: hsl(20 14.3% 4.1%);
+  --card-foreground: hsl(60 9.1% 97.8%);
 
-    --sidebar-accent: 240 4.8% 95.9%;
+  --popover: hsl(20 14.3% 4.1%);
+  --popover-foreground: hsl(60 9.1% 97.8%);
 
-    --sidebar-accent-foreground: 240 5.9% 10%;
+  --primary: hsl(60 9.1% 97.8%);
+  --primary-foreground: hsl(24 9.8% 10%);
 
-    --sidebar-border: 220 13% 91%;
+  --secondary: hsl(12 6.5% 15.1%);
+  --secondary-foreground: hsl(60 9.1% 97.8%);
 
-    --sidebar-ring: 217.2 91.2% 59.8%;
+  --muted: hsl(12 6.5% 15.1%);
+  --muted-foreground: hsl(24 5.4% 63.9%);
+
+  --accent: hsl(12 6.5% 15.1%);
+  --accent-foreground: hsl(60 9.1% 97.8%);
+
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(60 9.1% 97.8%);
+
+  --border: hsl(12 6.5% 15.1%);
+  --input: hsl(12 6.5% 15.1%);
+  --ring: hsl(24 5.7% 82.9%);
+  --sidebar-background: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@theme inline {
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
   }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
 
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
 
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
 
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
   }
 }
 

examples/music-player/tailwind.config.ts

@@ -1,98 +0,0 @@
-import type { Config } from "tailwindcss";
-import animate from "tailwindcss-animate";
-
-const config: Config = {
-  darkMode: ["class"],
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
-          foreground: "hsl(var(--sidebar-foreground))",
-          primary: "hsl(var(--sidebar-primary))",
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-          accent: "hsl(var(--sidebar-accent))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-          border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: {
-            height: "0",
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
-        },
-        "accordion-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)",
-          },
-          to: {
-            height: "0",
-          },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [animate],
-};
-
-export default config;

examples/music-player/tsconfig.app.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/organization/package.json

@@ -24,14 +24,14 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@playwright/test": "^1.50.1",
-    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
-    "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5"
   }

examples/organization/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/organization/src/index.css

@@ -1,17 +1,27 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
 
 @layer base {
+  :root {
+    --border-default: var(--color-stone-200);
+  }
+
+  .dark {
+    --border-default: var(--color-stone-900);
+  }
+
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--border-default, currentColor) !important;
+  }
+
   strong,
   h1,
   h2,
   h3 {
     @apply font-semibold text-stone-900 dark:text-white;
   }
-
-  [type="text"],
-  select {
-    border-color: theme("colors.stone.200");
-  }
 }

examples/organization/tailwind.config.ts

@@ -1,63 +0,0 @@
-import formsPlugin from "@tailwindcss/forms";
-import type { Config } from "tailwindcss";
-import plugin from "tailwindcss/plugin";
-
-const stonePalette = {
-  50: "oklch(0.988281 0.002 75)",
-  75: "oklch(0.980563 0.002 75)",
-  100: "oklch(0.964844 0.002 75)",
-  200: "oklch(0.917969 0.002 75)",
-  300: "oklch(0.853516 0.002 75)",
-  400: "oklch(0.789063 0.002 75)",
-  500: "oklch(0.726563 0.002 75)",
-  600: "oklch(0.613281 0.002 75)",
-  700: "oklch(0.523438 0.002 75)",
-  800: "oklch(0.412109 0.002 75)",
-  900: "oklch(0.302734 0.002 75)",
-  925: "oklch(0.220000 0.002 75)",
-  950: "oklch(0.193359 0.002 75)",
-} as const;
-
-const stonePaletteWithAlpha = { ...stonePalette };
-
-Object.keys(stonePalette).forEach((key) => {
-  stonePaletteWithAlpha[key] = stonePaletteWithAlpha[key].replace(
-    ")",
-    "/ <alpha-value>)",
-  );
-});
-
-const config: Config = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        stone: stonePaletteWithAlpha,
-      },
-      container: {
-        center: true,
-        padding: {
-          DEFAULT: "0.75rem",
-          sm: "1rem",
-        },
-        screens: {
-          md: "500px",
-          lg: "800px",
-          xl: "1100px",
-        },
-      },
-    },
-  },
-  plugins: [
-    formsPlugin,
-    plugin(({ addBase }) =>
-      addBase({
-        "*:focus": {
-          outline: "none",
-        },
-      }),
-    ),
-  ],
-} as const;
-
-export default config;

examples/passkey-svelte/package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "jazz-svelte": "workspace:*",
-    "jazz-tools": "workspace:*"
+    "jazz-tools": "workspace:*",
+    "tailwindcss": "^4.1.10"
   }
 }

examples/passkey/package.json

@@ -14,7 +14,8 @@
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "react-dom": "19.0.0",
+    "tailwindcss": "^4.1.10"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

examples/passphrase/package.json

@@ -14,7 +14,8 @@
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "react-dom": "19.0.0",
+    "tailwindcss": "^4.1.10"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

examples/pets/job-template.nomad

@@ -1,56 +0,0 @@
-job "example-pets$BRANCH_SUFFIX" {
-  region     = "global"
-  datacenters = ["*"]
-
-  group "static" {
-    count = 4
-
-    network {
-      port "http" {
-        to = 80
-      }
-    }
-
-    constraint {
-      attribute = "${node.class}"
-      operator  = "="
-      value     = "cloud"
-    }
-
-    spread {
-      attribute = "${node.datacenter}"
-      weight    = 100
-    }
-
-    constraint {
-      distinct_hosts = true
-    }
-
-    task "server" {
-      driver = "docker"
-
-      config {
-        image = "$DOCKER_TAG"
-        ports = ["http"]
-
-        auth = {
-          username = "$DOCKER_USER"
-          password = "$DOCKER_PASSWORD"
-        }
-      }
-
-      service {
-        tags = ["public"]
-        name = "example-pets$BRANCH_SUFFIX"
-        port = "http"
-        provider = "consul"
-      }
-
-      resources {
-        cpu    = 50 # MHz
-        memory = 50 # MB
-      }
-    }
-  }
-}
-# deploy bump 4

examples/pets/package.json

@@ -13,11 +13,11 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-toast": "^1.2.14",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.1",
     "jazz-inspector": "workspace:*",
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
@@ -28,21 +28,20 @@
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0",
     "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7",
     "uniqolor": "^1.1.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/node": "^22.5.1",
     "@types/qrcode": "^1.5.1",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react-swc": "^3.10.1",
-    "autoprefixer": "^10.4.20",
     "is-ci": "^3.0.1",
     "jazz-run": "workspace:*",
     "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5",
     "vite-plugin-top-level-await": "^1.4.4"

examples/pets/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/pets/src/basicComponents/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "@/basicComponents/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

examples/pets/src/basicComponents/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

examples/pets/src/basicComponents/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className,
     )}
     {...props}
@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
       className,
     )}
     {...props}
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
       className,
     )}
     toast-close=""

examples/pets/src/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

examples/pets/src/index.css

@@ -1,68 +1,149 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
+@custom-variant dark (&:is(.dark *));
 
-    --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
+:root {
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(20 14.3% 4.1%);
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(20 14.3% 4.1%);
 
-    --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(20 14.3% 4.1%);
 
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
+  --primary: hsl(24 9.8% 10%);
+  --primary-foreground: hsl(60 9.1% 97.8%);
 
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
+  --secondary: hsl(60 4.8% 95.9%);
+  --secondary-foreground: hsl(24 9.8% 10%);
 
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
+  --muted: hsl(60 4.8% 95.9%);
+  --muted-foreground: hsl(25 5.3% 44.7%);
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
+  --accent: hsl(60 4.8% 95.9%);
+  --accent-foreground: hsl(24 9.8% 10%);
 
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 20 14.3% 4.1%;
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(60 9.1% 97.8%);
 
-    --radius: 0.5rem;
+  --border: hsl(20 5.9% 90%);
+  --input: hsl(20 5.9% 90%);
+  --ring: hsl(20 14.3% 4.1%);
+
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: hsl(20 14.3% 4.1%);
+  --foreground: hsl(60 9.1% 97.8%);
+
+  --card: hsl(20 14.3% 4.1%);
+  --card-foreground: hsl(60 9.1% 97.8%);
+
+  --popover: hsl(20 14.3% 4.1%);
+  --popover-foreground: hsl(60 9.1% 97.8%);
+
+  --primary: hsl(60 9.1% 97.8%);
+  --primary-foreground: hsl(24 9.8% 10%);
+
+  --secondary: hsl(12 6.5% 15.1%);
+  --secondary-foreground: hsl(60 9.1% 97.8%);
+
+  --muted: hsl(12 6.5% 15.1%);
+  --muted-foreground: hsl(24 5.4% 63.9%);
+
+  --accent: hsl(12 6.5% 15.1%);
+  --accent-foreground: hsl(60 9.1% 97.8%);
+
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(60 9.1% 97.8%);
+
+  --border: hsl(12 6.5% 15.1%);
+  --input: hsl(12 6.5% 15.1%);
+  --ring: hsl(24 5.7% 82.9%);
+}
+
+@theme inline {
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
   }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
 
-  .dark {
-    --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
 
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
 
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-    --primary: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
-
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
-
-    --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
   }
 }
 

examples/pets/tailwind.config.ts

@@ -1,80 +0,0 @@
-import type { Config } from "tailwindcss";
-import animate from "tailwindcss-animate";
-
-const config: Config = {
-  darkMode: ["class"],
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [animate],
-};
-
-export default config;

examples/pets/tsconfig.app.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/reactions/package.json

@@ -15,7 +15,8 @@
     "jazz-react": "workspace:*",
     "jazz-tools": "workspace:*",
     "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "react-dom": "19.0.0",
+    "tailwindcss": "^4.1.10"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",

examples/reactions/tailwind.config.ts

@@ -1,16 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-
-export default config;

examples/richtext-prosemirror/package.json

@@ -28,14 +28,14 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@playwright/test": "^1.50.1",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
-    "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5"
   }

examples/richtext-prosemirror/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/richtext-prosemirror/src/App.tsx

@@ -14,7 +14,7 @@ function App() {
   return (
     <>
       <header>
-        <nav className="container flex justify-between items-center py-3">
+        <nav className="max-w-3xl mx-auto px-3 flex justify-between items-center py-3">
           {isAuthenticated ? (
             <span>You're logged in.</span>
           ) : (
@@ -23,7 +23,7 @@ function App() {
           <AuthButton />
         </nav>
       </header>
-      <main className="container mt-16 flex flex-col gap-8">
+      <main className="max-w-3xl mx-auto px-3 mt-16 flex flex-col gap-8">
         <Logo />
 
         <div className="text-center">

examples/richtext-prosemirror/src/index.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 .ProseMirror ul {
   @apply list-disc;

examples/richtext-prosemirror/tailwind.config.ts

@@ -1,23 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      container: {
-        center: true,
-        padding: {
-          DEFAULT: "0.75rem",
-          sm: "1rem",
-        },
-        screens: {
-          lg: "600px",
-          xl: "600px",
-        },
-      },
-    },
-  },
-  plugins: [],
-} as const;
-
-export default config;

examples/richtext-tiptap/package.json

@@ -31,14 +31,14 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@playwright/test": "^1.50.1",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",
     "@vitejs/plugin-react": "^4.5.1",
-    "autoprefixer": "^10.4.20",
     "globals": "^15.11.0",
     "is-ci": "^3.0.1",
-    "postcss": "^8.4.27",
-    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^4.1.10",
     "typescript": "5.6.2",
     "vite": "6.3.5"
   }

examples/richtext-tiptap/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };

examples/richtext-tiptap/src/App.tsx

@@ -14,7 +14,7 @@ function App() {
   return (
     <>
       <header>
-        <nav className="container flex justify-between items-center py-3">
+        <nav className="max-w-3xl mx-auto px-3 flex justify-between items-center py-3">
           {isAuthenticated ? (
             <span>You're logged in.</span>
           ) : (
@@ -23,7 +23,7 @@ function App() {
           <AuthButton />
         </nav>
       </header>
-      <main className="container mt-16 flex flex-col gap-8">
+      <main className="max-w-3xl mx-auto px-3 mt-16 flex flex-col gap-8">
         <Logo />
 
         <div className="text-center">