TailwindCSS集成React、TypeScript、Storybook样式不生效求助

你的配置里有4个直接导致Tailwind样式不生效的错误，逐个修改即可：

1. Storybook的webpack配置正则完全写错
   你在.storybook/main.ts里写的文件匹配规则是test: /\,css&/，这个正则根本匹配不到.css后缀的文件，直接导致你引入的index.css没有经过PostCSS处理，Tailwind的指令不会被编译成实际样式。而且你已经在项目根目录写了独立的postcss配置文件，不需要在webpackFinal里重复手写postcss-loader的插件配置，重复配置反而容易引发冲突，直接把这段错误的loader规则删掉即可，PostCSS配置会被构建工具自动识别。
2. Tailwind配置冲突
   你在tailwind.config.ts里同时写了content扫描规则和空的purge: []配置，Tailwind 3.x版本已经用content替代了旧版的purge配置，空的purge数组会在部分版本里覆盖content的扫描规则，导致所有Tailwind工具类都被构建时的摇树优化删除，直接删掉purge那行即可。
   另外你在index.css里写了@tailwind forms;指令，但tailwind配置的plugins数组里没有引入对应插件，如果你没有手动安装@tailwindcss/forms依赖，这行指令会直接导致CSS编译失败，没装插件就把这行指令删掉，装了就把插件补充到tailwind配置的plugins数组里。
3. 配置文件语法和后缀不匹配
   你把tailwind、postcss、storybook主配置文件的后缀都设为了.ts，但文件内容写的是CommonJS规范的module.exports语法，Node环境加载.ts后缀的配置文件时默认会按ESM语法解析，直接会因为语法不匹配读不到配置，Tailwind和PostCSS拿不到配置自然不会正常工作，把这几个配置文件的后缀改成.js即可。
4. Storybook里的CSS引入路径错误
   你在preview.ts里写的是import "index.css";，虽然tsconfig里配置了baseUrl: "src"，但Storybook默认不会自动读取tsconfig的路径别名配置，会直接找不到这个CSS文件，把导入改成准确的相对路径即可，比如.storybook目录和src目录同级的话，就写成import "../src/index.css";。

修改后的正确配置参考 #

.storybook/main.js（后缀改为js，删除错误的loader规则）

const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  }
};

tailwind.config.js（后缀改为js，删除purge配置）

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    // 安装@tailwindcss/forms后再引入：require('@tailwindcss/forms')
  ],
};

postcss.config.js（后缀改为js）

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

.storybook/preview.ts（修正CSS引入路径）

import "../src/index.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

src/index.css（移除未安装插件对应的指令）

@tailwind base;
@tailwind components;
@tailwind utilities;
/* 安装@tailwindcss/forms后再启用：
@tailwind forms;
*/

改完配置后删除node_modules/.cache目录清理构建缓存，重新启动Storybook即可正常加载Tailwind样式。

内容的提问来源于stack exchange，提问作者Saif