feat: Tailwind V4.

.storybook/styles.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config "../tailwind.config.ts";
 
 @layer base {
   * {
@@ -9,6 +8,6 @@
   body {
     @apply bg-background text-foreground;
     @apply font-sans;
-    @apply antialiased
+    @apply antialiased;
   }
 }

README.md

@@ -1,5 +1,5 @@
 # @quantinuum/quantinuum-ui
-Quantinuum UI is a React component library and design token system built with [shadcn](https://ui.shadcn.com/), Radix UI and Tailwind CSS.
+Quantinuum UI is a React component library and design token system built with [shadcn](https://ui.shadcn.com/), Radix UI and Tailwind CSS v4.
 
 It is used internally at Quantinuum for building web applications with a consistent look and feel.
 
@@ -25,3 +25,13 @@ npm run build # Build component library with rollup.
 
 # Design Tokens
 CSS variables are declared in `src/tokens.css`. Dark mode is enabled when adding the attribute `data-theme="dark"` higher up in the tree.
+
+# Tailwind v4
+Local development and Storybook load Tailwind through `.storybook/styles.css`, which imports Tailwind v4 and explicitly loads the shared config with `@config`.
+
+If you consume `tailwindTheme` from this package in another Tailwind v4 app, load your config from CSS as well:
+
+```css
+@import "tailwindcss";
+@config "./tailwind.config.ts";
+```

components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "src/globals.css",
+    "css": ".storybook/styles.css",
     "baseColor": "zinc",
     "cssVariables": true
   },

package.json

@@ -59,6 +59,7 @@
     "@storybook/addon-links": "^10.3.5",
     "@storybook/addon-onboarding": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
+    "@tailwindcss/postcss": "^4.0.0",
     "@tailwindcss/typography": "^0.5.15",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -67,7 +68,6 @@
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/parser": "^8.58.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.16",
     "date-fns": "^3.6.0",
     "eslint": "^9.39.2",
     "eslint-import-resolver-typescript": "^4.4.3",
@@ -86,6 +86,7 @@
     "rollup-plugin-scss": "^3.0.0",
     "semantic-release": "^24.2.5",
     "storybook": "^10.3.5",
+    "tailwindcss": "^4.0.0",
     "typescript": "^6.0.2",
     "vite": "^8.0.12",
     "vitest": "^4.1.7"
@@ -119,7 +120,7 @@
     "input-otp": "^1.4.1",
     "react-day-picker": "^8.10.0",
     "sonner": "^2.0.1",
-    "tailwind-merge": "^2.6.1"
+    "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^3.9.0",
@@ -130,7 +131,7 @@
     "react-dom": "^18.3.0",
     "react-hook-form": "^7.50.1",
     "react-icons": "^5.3.0",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^4.0.0",
     "zod": "^3.25.56"
   }
-}
+}