Next.js 中 TailwindCSS 全局 CSS 文件 @apply 指令不生效问题求助

解决方案 #

首先你提供的代码存在基础拼写错误：Tailwind CSS 官方内置灰色类名使用美式拼写gray，你写的text-grey-300是英式拼写，不属于内置类名，会导致@apply指令报错不生效，先修改此处代码：

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

@layer base{
body {
    @apply bg-[#06202A] text-gray-300; 
}
}

如果修改后依旧不生效，按以下步骤逐一排查：

• 确认全局CSS文件已正确导入到Next.js项目的_app.js/_app.tsx入口文件顶部，导入路径无错误，示例导入语句：import '../styles/globals.css'
• 检查tailwind.config.js的content字段是否完整覆盖了所有页面、组件的文件路径，JIT模式下只有被content匹配到的文件用到的样式才会被生成，标准Next.js项目配置参考：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 确认Tailwind CSS版本为v3及以上，低版本v2默认不支持方括号写法的任意自定义色值，需要额外开启相关配置
• 打开浏览器开发者工具的元素面板，检查body标签的样式列表，确认是否有其他内联样式、高优先级全局样式覆盖了Tailwind生成的body样式

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