upgrade tailwind to v4

app/build.ts

@@ -46,10 +46,18 @@ if (types && !watch) {
    buildTypes();
 }
 
+function banner(title: string) {
+   console.log("");
+   console.log("=".repeat(40));
+   console.log(title.toUpperCase());
+   console.log("-".repeat(40));
+}
+
 /**
  * Building backend and general API
  */
 async function buildApi() {
+   banner("Building API");
    await tsup.build({
       minify,
       sourcemap,
@@ -109,6 +117,7 @@ async function buildUi() {
       },
    } satisfies tsup.Options;
 
+   banner("Building UI");
    await tsup.build({
       ...base,
       entry: ["src/ui/index.ts", "src/ui/main.css", "src/ui/styles.css"],
@@ -119,6 +128,7 @@ async function buildUi() {
       },
    });
 
+   banner("Building Client");
    await tsup.build({
       ...base,
       entry: ["src/ui/client/index.ts"],
@@ -136,6 +146,7 @@ async function buildUi() {
  * - ui/client is external, and after built replaced with "bknd/client"
  */
 async function buildUiElements() {
+   banner("Building UI Elements");
    await tsup.build({
       minify,
       sourcemap,
@@ -205,6 +216,7 @@ function baseConfig(adapter: string, overrides: Partial<tsup.Options> = {}): tsu
 }
 
 async function buildAdapters() {
+   banner("Building Adapters");
    // base adapter handles
    await tsup.build({
       ...baseConfig(""),

app/package.json

@@ -72,6 +72,8 @@
     "@mantine/notifications": "^7.17.1",
     "@rjsf/core": "5.22.2",
     "@tabler/icons-react": "3.18.0",
+    "@tailwindcss/postcss": "^4.0.12",
+    "@tailwindcss/vite": "^4.0.12",
     "@types/node": "^22.13.10",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
@@ -92,8 +94,8 @@
     "react-icons": "5.2.1",
     "react-json-view-lite": "^2.4.1",
     "sql-formatter": "^15.4.11",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss": "^3.4.14",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.12",
     "tailwindcss-animate": "^1.0.7",
     "tsc-alias": "^1.8.11",
     "tsup": "^8.4.0",

app/postcss.config.js

@@ -1,9 +1,6 @@
 export default {
    plugins: {
-      "postcss-import": {},
-      "tailwindcss/nesting": {},
-      tailwindcss: {},
-      autoprefixer: {},
+      "@tailwindcss/postcss": {},
       "postcss-preset-mantine": {},
       "postcss-simple-vars": {
          variables: {

app/src/ui/client/BkndProvider.tsx

@@ -101,11 +101,13 @@ export function BkndProvider({
       }
 
       startTransition(() => {
-         setSchema(newSchema);
-         setWithSecrets(_includeSecrets);
-         setFetched(true);
-         set_local_version((v) => v + 1);
-         fetching.current = Fetching.None;
+         document.startViewTransition(() => {
+            setSchema(newSchema);
+            setWithSecrets(_includeSecrets);
+            setFetched(true);
+            set_local_version((v) => v + 1);
+            fetching.current = Fetching.None;
+         });
       });
    }
 

app/src/ui/client/schema/system/use-bknd-system.ts

@@ -36,6 +36,10 @@ export function useBkndSystemTheme() {
    return {
       theme: $sys.theme,
       set: $sys.actions.theme.set,
-      toggle: () => $sys.actions.theme.toggle(),
+      toggle: async () => {
+         document.startViewTransition(async () => {
+            await $sys.actions.theme.toggle();
+         });
+      },
    };
 }

app/src/ui/components/buttons/Button.tsx

@@ -23,7 +23,7 @@ const styles = {
    outline: "border border-primary/20 bg-transparent hover:bg-primary/5 link text-primary/80",
    red: "dark:bg-red-950 dark:hover:bg-red-900 bg-red-100 hover:bg-red-200 link text-primary/70",
    subtlered:
-      "dark:text-red-950 text-red-700 dark:hover:bg-red-900 bg-transparent hover:bg-red-50 link",
+      "dark:text-red-700 text-red-700 dark:hover:bg-red-900 dark:hover:text-red-200 bg-transparent hover:bg-red-50 link",
 };
 
 export type BaseProps = {
@@ -51,7 +51,7 @@ const Base = ({
 }: BaseProps) => ({
    ...props,
    className: twMerge(
-      "flex flex-row flex-nowrap items-center font-semibold disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed transition-[opacity,background-color,color,border-color]",
+      "flex flex-row flex-nowrap items-center !font-semibold disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed transition-[opacity,background-color,color,border-color]",
       sizes[size ?? "default"],
       styles[variant ?? "default"],
       props.className,

app/src/ui/layouts/AppShell/AppShell.tsx

@@ -48,7 +48,7 @@ export const NavLink = <E extends React.ElementType = "a">({
       <Tag
          {...otherProps}
          className={twMerge(
-            "px-6 py-2 [&.active]:bg-muted [&.active]:hover:bg-primary/15 hover:bg-primary/5 flex flex-row items-center rounded-full gap-2.5 link",
+            "px-6 py-2 [&.active]:bg-muted [&.active]:hover:bg-primary/15 hover:bg-primary/5 flex flex-row items-center rounded-full gap-2.5 link transition-colors",
             disabled && "opacity-50 cursor-not-allowed",
             className,
          )}
@@ -80,7 +80,7 @@ export function Main({ children }) {
          data-shell="main"
          className={twMerge(
             "flex flex-col flex-grow w-1 flex-shrink-1",
-            sidebar.open && "max-w-[calc(100%-350px)]",
+            sidebar.open && "md:max-w-[calc(100%-350px)]",
          )}
       >
          {children}

app/src/ui/lib/mantine/theme.ts

@@ -107,8 +107,11 @@ export function createMantineTheme(scheme: "light" | "dark"): {
                }),
             }),
             Tabs: Tabs.extend({
-               classNames: (theme, props) => ({
-                  tab: "data-[active=true]:border-primary",
+               vars: (theme, props) => ({
+                  // https://mantine.dev/styles/styles-api/
+                  root: {
+                     "--tabs-color": "border-primary",
+                  },
                }),
             }),
             Menu: Menu.extend({

app/src/ui/main.css

@@ -1,24 +1,14 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-#bknd-admin.dark,
-.dark .bknd-admin,
-.bknd-admin.dark {
-   --color-primary: 250 250 250; /* zinc-50 */
-   --color-background: 30 31 34;
-   --color-muted: 47 47 52;
-   --color-darkest: 255 255 255; /* white */
-   --color-lightest: 24 24 27; /* black */
-}
+@custom-variant dark (&:where(.dark, .dark *));
 
 #bknd-admin,
 .bknd-admin {
-   --color-primary: 9 9 11; /* zinc-950 */
-   --color-background: 250 250 250; /* zinc-50 */
-   --color-muted: 228 228 231; /* ? */
-   --color-darkest: 0 0 0; /* black */
-   --color-lightest: 255 255 255; /* white */
+   --color-primary: rgb(9 9 11); /* zinc-950 */
+   --color-background: rgb(250 250 250); /* zinc-50 */
+   --color-muted: rgb(228 228 231); /* ? */
+   --color-darkest: rgb(0 0 0); /* black */
+   --color-lightest: rgb(255 255 255); /* white */
 
    @mixin light {
       --mantine-color-body: rgb(250 250 250);
@@ -32,6 +22,24 @@
    }
 }
 
+.dark,
+#bknd-admin.dark,
+.bknd-admin.dark {
+   --color-primary: rgb(250 250 250); /* zinc-50 */
+   --color-background: rgb(30 31 34);
+   --color-muted: rgb(47 47 52);
+   --color-darkest: rgb(255 255 255); /* white */
+   --color-lightest: rgb(24 24 27); /* black */
+}
+
+@theme {
+   --color-primary: var(--color-primary);
+   --color-background: var(--color-background);
+   --color-muted: var(--color-muted);
+   --color-darkest: var(--color-darkest);
+   --color-lightest: var(--color-lightest);
+}
+
 #bknd-admin {
    @apply bg-background text-primary overflow-hidden h-dvh w-dvw;
 
@@ -51,37 +59,12 @@ body,
    @apply flex flex-1 flex-col h-dvh w-dvw;
 }
 
-@layer components {
-   .link {
-      @apply transition-colors active:translate-y-px;
-   }
+.link {
+   @apply active:translate-y-px;
+}
 
-   .img-responsive {
-      @apply max-h-full w-auto;
-   }
-
-   /**
-    * debug classes
-    */
-   .bordered-red {
-      @apply border-2 border-red-500;
-   }
-
-   .bordered-green {
-      @apply border-2 border-green-500;
-   }
-
-   .bordered-blue {
-      @apply border-2 border-blue-500;
-   }
-
-   .bordered-violet {
-      @apply border-2 border-violet-500;
-   }
-
-   .bordered-yellow {
-      @apply border-2 border-yellow-500;
-   }
+.img-responsive {
+   @apply max-h-full w-auto;
 }
 
 #bknd-admin,

app/src/ui/main.tsx

@@ -4,11 +4,19 @@ import Admin from "./Admin";
 import "./main.css";
 import "./styles.css";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-   <React.StrictMode>
-      <Admin withProvider />
-   </React.StrictMode>,
-);
+function render() {
+   ReactDOM.createRoot(document.getElementById("root")!).render(
+      <React.StrictMode>
+         <Admin withProvider />
+      </React.StrictMode>,
+   );
+}
+
+if ("startViewTransition" in document) {
+   document.startViewTransition(render);
+} else {
+   render();
+}
 
 // REGISTER ERROR OVERLAY
 const showOverlay = true;

app/src/ui/routes/test/index.tsx

@@ -26,9 +26,11 @@ import ReactFlowTest from "./tests/reactflow-test";
 import SchemaTest from "./tests/schema-test";
 import SortableTest from "./tests/sortable-test";
 import { SqlAiTest } from "./tests/sql-ai-test";
+import Themes from "./tests/themes";
 
 const tests = {
    DropdownTest,
+   Themes,
    ModalTest,
    JsonFormTest,
    FlowFormTest,

app/src/ui/routes/test/tests/themes.tsx

@@ -0,0 +1,48 @@
+import { Button } from "ui/components/buttons/Button";
+import { Alert } from "ui/components/display/Alert";
+import * as Formy from "ui/components/form/Formy";
+
+export default function Themes() {
+   return (
+      <div className="flex flex-col p-3 gap-4">
+         <div className="flex flex-row gap-2 items-center">
+            <Button size="small">Small</Button>
+            <Button>Default</Button>
+            <Button variant="primary">Primary</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="red">Red</Button>
+            <Button variant="subtlered">Subtlered</Button>
+            <Button size="large">Large</Button>
+         </div>
+         <div className="flex flex-row gap-1">
+            <Alert.Exception title="Exception">Alert.Exception</Alert.Exception>
+            <Alert.Info title="Info">Alert.Info</Alert.Info>
+            <Alert.Success title="Success">Alert.Success</Alert.Success>
+            <Alert.Warning title="Warning">Alert.Warning</Alert.Warning>
+         </div>
+         <div className="flex flex-row gap-3 items-start">
+            <Formy.Group>
+               <Formy.Label>Input</Formy.Label>
+               <Formy.Input placeholder="Input" />
+            </Formy.Group>
+            <Formy.Group>
+               <Formy.Label>Checkbox</Formy.Label>
+               <Formy.BooleanInput />
+            </Formy.Group>
+            <Formy.Group>
+               <Formy.Label>Switch</Formy.Label>
+               <Formy.Switch />
+            </Formy.Group>
+            <Formy.Group>
+               <Formy.Label>Select</Formy.Label>
+               <Formy.Select>
+                  <option value="" />
+                  <option value="1">Option 1</option>
+                  <option value="2">Option 2</option>
+               </Formy.Select>
+            </Formy.Group>
+         </div>
+      </div>
+   );
+}

app/vite.config.ts

@@ -3,6 +3,7 @@ import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { devServerConfig } from "./src/adapter/vite/dev-server-config";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -25,6 +26,7 @@ export default defineConfig({
          ...devServerConfig,
          entry: "./vite.dev.ts",
       }),
+      tailwindcss(),
    ],
    build: {
       manifest: true,