diff --git a/app/globals.css b/app/globals.css
index edaacf7..e1156e9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,6 +1,9 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "tailwindcss";
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
 
 :root {
   --background: #ffffff;
diff --git a/app/page.tsx b/app/page.tsx
index 134943d..dd5322d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,7 +15,7 @@ export default function Home() {
         <ol className="list-inside list-decimal text-sm text-center sm:text-left">
           <li className="mb-2">
             Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded-sm font-semibold">
               app/page.tsx
             </code>
           </li>
diff --git a/bun.lockb b/bun.lockb
index af4137c..04568f8 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 466c8aa..376b720 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@biomejs/biome": "^1.9.4",
     "@happy-dom/global-registrator": "^15.11.6",
     "@playwright/test": "next",
+    "@tailwindcss/postcss": "^4.0.0-beta.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
     "@types/bun": "^1.1.13",
@@ -28,7 +29,7 @@
     "@types/react-dom": "^18.3.1",
     "babel-plugin-react-compiler": "experimental",
     "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^4.0.0-beta.2",
     "typescript": "^5.7.2"
   },
   "trustedDependencies": ["@biomejs/biome", "sharp"]
diff --git a/postcss.config.mjs b/postcss.config.mjs
index 0dc456a..a869506 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index a68775e..0000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Config } from "tailwindcss"
-
-export default {
-  content: ["./app/**/*.{js,ts,jsx,tsx,mdx}"],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [],
-} satisfies Config