Setup Storybook with Tailwind

.npmrc

@@ -1,2 +1,3 @@
 auto-install-peers = true
-public-hoist-pattern[]=*storybook*
+hoist-pattern[]=!@storybook*
+hoist-pattern[]=!storybook*

apps/docs/.storybook/preview.js

@@ -0,0 +1 @@
+import "../../../packages/ui/index.css";

apps/docs/package.json

@@ -12,22 +12,24 @@
   },
   "dependencies": {
     "@acme/ui": "workspace:*",
+    "autoprefixer": "^10.4.18",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-docs": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
+    "@repo/typescript-config": "workspace:*",
+    "@storybook/addon-actions": "^8.0.0-rc.1",
+    "@storybook/addon-docs": "^8.0.0-rc.1",
+    "@storybook/addon-essentials": "^8.0.0-rc.1",
+    "@storybook/addon-links": "^8.0.0-rc.1",
+    "@storybook/react": "^8.0.0-rc.1",
+    "@storybook/react-vite": "^8.0.0-rc.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "serve": "^14.2.1",
-    "storybook": "^7.6.17",
-    "@repo/typescript-config": "workspace:*",
+    "storybook": "^8.0.0-rc.1",
     "typescript": "^5.3.3",
     "vite": "^5.1.4"
   }

apps/docs/postcss.config.cjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: [
+    require("autoprefixer"),
+    require("tailwindcss")("../../packages/ui/tailwind.config.js"),
+  ],
+};
+
+module.exports = config;

apps/docs/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});

packages/ui/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/ui/package.json

@@ -18,15 +18,20 @@
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
+    "autoprefixer": "^10.4.18",
     "eslint": "^8.57.0",
+    "postcss": "^8.4.35",
     "react": "^18.2.0",
-    "@repo/typescript-config": "workspace:*",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

packages/ui/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/ui/src/button.tsx

@@ -5,9 +5,12 @@ export interface ButtonProps
 
 export function Button({ children, ...other }: ButtonProps): JSX.Element {
   return (
-    <button type="button" {...other}>
-      {children}
-    </button>
+    <div>
+      <button type="button" {...other}>
+        {children}
+      </button>
+      <p className="text-3xl font-bold underline">Hello world</p>
+    </div>
   );
 }
 

packages/ui/tailwind.config.js

@@ -0,0 +1,10 @@
+const { join } = require("node:path");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [join(__dirname, "./src/**/*.{js,ts,jsx,tsx}")],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};