在Next.js/Tailwind中如何通过@apply设置背景渐变？

完全可以在@layer base里通过@apply使用Tailwind的渐变工具类，你的写法是没问题的。

直接修改你的global.css代码即可：

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

@layer base {
  body{
    @apply bg-gradient-to-b from-gray-400 via-gray-600 to-blue-800 text-sky-100;
  }
}

需要注意几个细节：

• 这些渐变相关的工具类（bg-gradient-to-b、from-*、via-*、to-*）都是Tailwind默认提供的，只要你没在tailwind.config.js里刻意移除这些颜色或工具类，就能正常生效。
• 如果是Next.js 13+的App Router模式，确保你已经在根layout.tsx中正确导入了global.css文件。
• 如果遇到样式不生效的情况，可以试试这几个排查步骤：
  • 检查tailwind.config.js的content配置，确保包含了所有需要应用样式的文件路径（比如app/**/*.{js,ts,jsx,tsx,mdx}、pages/**/*.{js,ts,jsx,tsx,mdx}）
  • 重启Next.js的开发服务器，清除缓存
  • 确认没有其他CSS规则覆盖了body的背景样式

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