init tw

.storybook/main.js

@@ -0,0 +1,28 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', //
+
+    '../packages/**/*.mdx',
+    '../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-onboarding', '@chromatic-com/storybook', '@storybook/experimental-addon-test'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  async viteFinal(config) {
+    const isDev = config.mode === 'development';
+    config.base = isDev ? '/' : '/root/tw-story'; // 设置基础路径
+    // 添加 Tailwind CSS 支持
+    config.css = {
+      postcss: {
+        // @ts-ignore
+        plugins: [require('@tailwindcss/postcss')({})],
+      },
+    };
+    return config;
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import './tailwind.css';
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/tailwind.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

.storybook/vitest.setup.js

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);