How to configure VueJS + PostCss + Tailwind with Storybook

1. 初始化Vue项目

首先，我们需要创建一个Vue项目（如果你还没有的话）。这可以通过Vue CLI轻松完成。打开终端并运行以下命令：

bash
vue create my-vue-app
cd my-vue-app

选择需要的配置或者直接用默认配置都可以。

2. 安装Storybook

进入项目文件夹后，我们要添加Storybook。Storybook官方提供了一个快速安装命令：

bash
npx sb init

这个命令会自动检测你的项目类型（在这里是Vue），并安装适当的Storybook依赖。

3. 配置PostCSS和Tailwind CSS

安装完Storybook后，接下来就是配置PostCSS和Tailwind CSS。首先，我们需要安装Tailwind CSS 和 PostCSS 的依赖：

bash
npm install tailwindcss postcss autoprefixer -D

然后，你需要初始化Tailwind CSS：

bash
npx tailwindcss init

这会生成一个 tailwind.config.js 文件。你可以按需调整该配置。

接下来，创建一个PostCSS配置文件。在项目根目录下创建一个 postcss.config.js 文件，并添加以下内容：

javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

4. 在Vue组件中使用Tailwind CSS

你现在可以在Vue组件的<style>标签中开始使用Tailwind CSS。例如：

vue
<template>
  <div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md">
    <h1 class="text-xl font-semibold">Hello Storybook with Tailwind</h1>
  </div>
</template>

<style scoped>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>

5. 更新Storybook配置以支持PostCSS和Tailwind

为了让Storybook理解PostCSS和Tailwind CSS，我们需要对Storybook的Webpack配置进行一些调整。在 .storybook 目录中，找到 main.js 文件，确保添加了对.css文件的支持：

javascript
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-postcss'
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              ident: 'postcss',
              plugins: [require('tailwindcss'), require('autoprefixer')],
            },
          },
        },
      ],
    });

    return config;
  },
};

确保你安装了 @storybook/preset-postcss 这个插件：

bash
npm install @storybook/preset-postcss -D

6. 运行Storybook

一切配置完成后，可以运行Storybook来查看你的组件：

bash
npm run storybook

打开浏览器访问Storybook提供的本地服务器地址（通常是 http://localhost:6006），你应该能看到你的Vue组件并且已经应用了Tailwind的样式。

这样，你就成功地在Vue项目中集成了Storybook，同时使用了PostCSS和Tailwind CSS来管理和应用样式了。