无法在CSS文件自定义选择器中应用部分Tailwind现有类

1. 检查Tailwind版本差异 #

min-h-5是Tailwind CSS v3.1及以上版本新增的基于间距系统的最小高度类，v3.0及以下版本没有该类。两台机器的Tailwind版本不一致可能是问题根源：

• 运行命令查看当前项目的Tailwind版本：

  npm list tailwindcss
  # 或 yarn list tailwindcss
  

• 统一升级到v3.1+版本：

  npm install tailwindcss@latest
  # 或 yarn add tailwindcss@latest
  

2. 为自定义类添加@layer指令 #

将自定义网格类包裹在@layer components中，确保Tailwind正确解析内置类的依赖关系：

@layer components {
  .e-grid-row {
    @apply bg-gray-100 border border-gray-800;
  }

  .e-grid-cell {
    @apply flex min-h-5;
  }
}

@layer能让Tailwind的编译流程按正确顺序处理@apply引用的类，避免因编译优先级导致的识别错误。

3. 彻底清理缓存 #

跨机器的异常大概率和缓存残留有关，执行以下步骤清理所有可能的缓存：

• 删除项目根目录下的node_modules和锁文件（package-lock.json/yarn.lock）
• 清理npm/yarn全局缓存：

  npm cache clean --force
  # 或 yarn cache clean
  

• 清理框架缓存（如Next.js的.next/cache、Vite的node_modules/.vite）
• 重新安装依赖：

  npm install
  # 或 yarn install
  

4. 确认CSS文件的导入方式 #

确保eGrid.css是导入到包含Tailwind核心指令的主样式文件中，而非单独在组件中导入。例如在main.css中：

@tailwind base;
@tailwind components;
@tailwind utilities;

@import './eGrid.css';

这样Tailwind会在编译主样式文件时，一并处理自定义CSS中的@apply规则。

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