Angular项目中使用Tailwind @apply自定义类报错如何解决？

问题描述 #

各位好，我在Angular项目的CSS文件中使用自定义Tailwind类时出现报错，当我删除代码中的focus:shadow-outline后，自定义类就能正常工作。当前我的Tailwind配置文件如下：

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

解决方法 #

1. 替换废弃的Tailwind类
   focus:shadow-outline在Tailwind CSS v3版本中已被官方废弃，官方推荐使用ring系列焦点样式类替代。你可以根据需求替换为类似写法：

/* 示例：替换为环形焦点样式 */
.custom-class {
  @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}

2. 扩展Tailwind扫描范围
   如果自定义类写在单独的CSS文件中，需要让Tailwind的JIT编译器扫描到这些类。修改tailwind.config.js的content配置，添加CSS文件路径：

module.exports = {
  content: ['./src/**/*.{html,ts,css}'], // 新增css文件扫描规则
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 清理项目缓存
   Angular构建缓存或Tailwind缓存可能导致类解析异常，执行以下操作清理：

• 运行ng build --delete-output-path清理构建产物
• 删除node_modules/.cache目录（若存在）
• 重新启动开发服务器：ng serve

4. 检查自定义类语法
   确保CSS中@apply的使用语法正确，避免遗漏分号或类名拼写错误：

/* 正确写法示例 */
.btn-custom {
  @apply px-4 py-2 rounded-md focus:ring-2;
}

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