Tailwind v4 搭配 Playwright 搭建问题：CSS未生效

嘿，我看你在给外部UI库配置Playwright组件测试时，碰到了Tailwind v4 CSS不生效的问题，先理理你的项目情况：

你的项目结构大概是这样的：

• src/components/：存放所有UI组件的文件夹
• playwright/__tests_/Button.spec.tsx：Playwright组件测试文件

测试代码大概长这样：

import React from "react";
import { test, expect } from "@playwright/experimental-ct-react";
import { Button } from "../../src/components";

test("should work", async ({ mount }) => {
  const component = await mount(<Button>Test Button</Button>);
  // 这里应该是发现按钮的Tailwind样式没生效，比如预设的颜色、内边距都不对
});

我之前也折腾过类似的配置，给你几个针对性的解决步骤，应该能搞定：

1. 确保Tailwind配置能扫到所有需要的文件 #

Tailwind v4默认用JIT模式，只有扫描到的文件里的类名才会被生成样式。打开你的tailwind.config.ts，把组件文件夹和测试文件夹都加到content数组里：

import type { Config } from 'tailwindcss';

export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}', // 覆盖所有组件文件
    './playwright/**/*.{js,jsx,ts,tsx}', // 把测试文件也加进来，避免样式被摇树优化掉
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

2. 在Playwright测试里加载Tailwind样式 #

Playwright组件测试需要手动引入全局样式，你可以这么做：

• 先在playwright目录下创建一个setup.ts文件，导入你的Tailwind入口CSS：

  import "../src/styles/tailwind.css"; // 这里路径根据你实际的CSS文件位置调整
  

• 然后修改playwright-ct.config.ts，把这个setup文件配置进去：

  import { defineConfig, devices } from '@playwright/experimental-ct-react';
  
  export default defineConfig({
    testDir: './playwright/__tests__',
    setupFiles: ['./playwright/setup.ts'], // 让测试前先加载样式
    use: {
      trace: 'on-first-retry',
      ctViteConfig: {
        // 如果用了路径别名，比如@指向src，记得在这里配置好
        resolve: {
          alias: {
            '@': './src',
          },
        },
      },
    },
    projects: [
      {
        name: 'chromium',
        use: { ...devices['Desktop Chrome'] },
      },
    ],
  });
  

3. 确保Vite正确集成Tailwind v4 #

Playwright组件测试依赖Vite环境，所以要确保Vite配置里装了Tailwind的插件：

• 先安装@tailwindcss/vite：

  npm install @tailwindcss/vite --save-dev
  

• 然后在vite.config.ts里配置插件：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  import tailwindcss from '@tailwindcss/vite';
  
  export default defineConfig({
    plugins: [react(), tailwindcss()],
    resolve: {
      alias: {
        '@': './src',
      },
    },
  });
  

4. 检查动态类名的写法 #

如果你在组件里用了动态拼接的类名（比如bg-${color}-500），Tailwind v4的JIT模式是识别不到的，建议改成明确的类名列表，比如：

// 不好的写法
<Button className={`bg-${color}-500`} />

// 推荐的写法
const colorClasses = {
  primary: 'bg-blue-500',
  secondary: 'bg-gray-500'
};
<Button className={colorClasses[color]} />

做完这些配置后，重新跑一下测试，应该就能看到Tailwind样式正常生效了。

备注：内容来源于stack exchange，提问作者Just-a-guy