Vitest测试中Tailwind CSS样式不生效问题求助

问题根源 #

Vitest测试环境不会自动加载Tailwind全局样式，且直接修改window.innerWidth后，jsdom不会主动触发媒体查询更新，导致响应式样式无法生效。

解决步骤 #

1. 在测试初始化文件中引入Tailwind全局样式 #

打开src/setup-tests.ts，导入项目中包含Tailwind核心指令的全局CSS文件（通常是index.css或tailwind.css）：

// src/setup-tests.ts
import './index.css'; // 替换为你项目中实际的Tailwind全局CSS路径

该全局CSS文件需包含Tailwind基础指令：

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

2. 配置PostCSS确保Tailwind编译正常 #

在项目根目录创建postcss.config.js文件，配置Tailwind编译插件：

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

如果Vite未自动识别PostCSS配置，可在vite.config.ts中显式指定：

export default defineConfig({
  // ...其他已有配置
  css: {
    postcss: './postcss.config.js',
  },
});

3. 手动触发resize事件激活媒体查询 #

直接修改window.innerWidth后，需要手动触发resize事件让响应式规则生效：

// Navlink.test.tsx
it("renders correct styles", () => {
    window.innerWidth = 767;
    // 触发resize事件，更新媒体查询状态
    window.dispatchEvent(new Event('resize'));
    
    render(<NavLink title={title} />);
    const linkElement = screen.getByText(title);
    expect(linkElement).toHaveStyle("font-size: 8rem");
});

可选：优先测试Tailwind类而非具体样式 #

更稳定的测试方式是验证元素是否应用了目标Tailwind类，而非直接校验CSS数值：

it("applies correct Tailwind classes", () => {
    window.innerWidth = 767;
    window.dispatchEvent(new Event('resize'));
    
    render(<NavLink title={title} />);
    const linkElement = screen.getByText(title);
    expect(linkElement).toHaveClass('sm:text-8xl');
});

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