Version 4 init

package.json

@@ -28,6 +28,7 @@
     "@storybook/react": "8.6.0-alpha.0",
     "@storybook/test": "8.6.0-alpha.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^22.10.7",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
@@ -37,9 +38,9 @@
     "postcss": "^8.5.1",
     "postinstall": "^0.7.5",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.10",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "storybook": "8.6.0-alpha.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.7.3"
   },
   "engines": {

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

src/styles/globals.css

@@ -1,42 +1,66 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@config '../../tailwind.config.ts';
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+/*
+  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.
+
+  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);
   }
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+@utility btnPrimaryLarge {
+  @apply rounded-sm bg-blue-500 px-4 py-2 font-bold text-white;
 }
 
-@layer components {
-  .btnPrimaryLarge {
-    @apply rounded bg-blue-500 px-4 py-2 font-bold text-white;
-  }
-  .btnPrimarySmall {
-    @apply rounded bg-blue-500 px-2 py-1 font-bold text-white;
-  }
-  .btnOutlineLarge {
-    @apply rounded border border-blue-500 px-4 py-2 font-bold text-blue-500;
-  }
-  .btnOutlineSmall {
-    @apply rounded border border-blue-500 px-2 py-1 font-bold text-blue-500;
+@utility btnPrimarySmall {
+  @apply rounded-sm bg-blue-500 px-2 py-1 font-bold text-white;
+}
+
+@utility btnOutlineLarge {
+  @apply rounded-sm border border-blue-500 px-4 py-2 font-bold text-blue-500;
+}
+
+@utility btnOutlineSmall {
+  @apply rounded-sm border border-blue-500 px-2 py-1 font-bold text-blue-500;
+}
+
+@utility btnOpenLarge {
+  @apply rounded-sm bg-blue-500 px-4 py-2 font-bold text-white;
+}
+
+@utility btnOpenSmall {
+  @apply rounded-sm bg-blue-500 px-2 py-1 font-bold text-white;
+}
+
+@layer utilities {
+  :root {
+    --background: #ffffff;
+    --foreground: #171717;
   }
-  .btnOpenLarge {
-    @apply rounded bg-blue-500 px-4 py-2 font-bold text-white;
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: #0a0a0a;
+      --foreground: #ededed;
+    }
   }
-  .btnOpenSmall {
-    @apply rounded bg-blue-500 px-2 py-1 font-bold text-white;
+
+  body {
+    color: var(--foreground);
+    background: var(--background);
+    font-family: Arial, Helvetica, sans-serif;
   }
 }