diff --git a/apps/site/app/global.css b/apps/site/app/global.css
index f0866d0520..63a27b7c84 100644
--- a/apps/site/app/global.css
+++ b/apps/site/app/global.css
@@ -8,6 +8,38 @@
 @source '../../packages/react/src/**/*.{ts,tsx}';
 @source '../../packages/plugin-*/src/**/*.{ts,tsx}';
 
+/* Tailwind plugin for animations */
+@plugin 'tailwindcss-animate';
+
+/* Define theme colors for Tailwind 4 */
+@theme {
+  /* Border radius tokens */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* Color tokens mapped to CSS variables */
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+}
+
 /* ObjectUI component CSS custom properties */
 :root {
   --background: 0 0% 100%;
diff --git a/apps/site/package.json b/apps/site/package.json
index 2b8781ab2c..4e6d03f11d 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -12,13 +12,13 @@
   "dependencies": {
     "@object-ui/components": "workspace:*",
     "@object-ui/core": "workspace:*",
-    "@object-ui/react": "workspace:*",
-    "@object-ui/types": "workspace:*",
-    "@object-ui/plugin-editor": "workspace:*",
     "@object-ui/plugin-charts": "workspace:*",
+    "@object-ui/plugin-editor": "workspace:*",
     "@object-ui/plugin-kanban": "workspace:*",
     "@object-ui/plugin-markdown": "workspace:*",
     "@object-ui/plugin-object": "workspace:*",
+    "@object-ui/react": "workspace:*",
+    "@object-ui/types": "workspace:*",
     "fumadocs-core": "^16.4.7",
     "fumadocs-mdx": "^14.2.6",
     "fumadocs-ui": "^16.4.7",
@@ -36,6 +36,7 @@
     "autoprefixer": "^10.4.23",
     "postcss": "^8.4.49",
     "tailwindcss": "^4.1.18",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.9.3"
   }
 }
diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts
deleted file mode 100644
index 932911ba43..0000000000
--- a/apps/site/tailwind.config.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-export default {
-  darkMode: "class",
-  content: [
-    './app/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './content/**/*.{md,mdx}',
-    '../../packages/components/src/**/*.{ts,tsx}',
-    '../../packages/react/src/**/*.{ts,tsx}',
-    '../../packages/plugin-*/src/**/*.{ts,tsx}',
-  ],
-  theme: {
-    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)",
-      },
-    },
-  },
-} satisfies Config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 805b513f97..b5c0f7cda4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -178,6 +178,9 @@ importers:
       tailwindcss:
         specifier: ^4.1.18
         version: 4.1.18
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@4.1.18)
       typescript:
         specifier: ^5.9.3
         version: 5.9.3