TailwindCSS v3中@apply指令在CSS文件内无法生效求助

1. 确认Tailwind配置文件的内容扫描范围 #

Tailwind仅会为content配置项中匹配到的文件生成对应工具类，若自定义CSS或HTML文件不在扫描范围内，@apply引用的工具类不会被生成。检查tailwind.config.js：

module.exports = {
  content: [
    "./index.html", // 你的HTML文件路径
    "./src/**/*.{css,js}" // 自定义CSS/JS文件路径，根据项目结构调整
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 确保自定义CSS文件被正确引入 #

你的CSS写法符合规范（在@tailwind指令后定义自定义类），但需确认文件已被项目加载：

• 在HTML中通过<link>标签引入：

  <link rel="stylesheet" href="./path/to/your/custom.css">
  

• 或在JS入口文件中导入：

  import './path/to/your/custom.css';
  

3. 补充汉堡菜单的交互逻辑 #

HTML和CSS已定义hamburger-active类的样式，但缺少JavaScript切换该类，导致点击按钮无旋转效果。添加以下代码：

const hamburgerBtn = document.getElementById('hamburger');
hamburgerBtn.addEventListener('click', () => {
  hamburgerBtn.classList.toggle('hamburger-active');
});

4. 清除浏览器缓存 #

若以上步骤无效，可能是浏览器缓存了旧CSS文件，按下Ctrl+F5强制刷新页面，或手动清除浏览器缓存。

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