Next.js中Tailwind动态拼接类名不生效 div样式未正常渲染

Tailwind CSS 采用构建时静态扫描的机制生成最终样式：它会遍历配置的content路径下所有源码文件，匹配识别完整的Tailwind类名，仅把识别到的类对应的样式打包进最终CSS文件。
你当前代码中使用了bg-${colour}-500、border-${colour}-400这类字符串插值动态拼接类名的写法，Tailwind在扫描阶段无法解析拼接后的完整类名，因此不会生成对应颜色相关的样式，最终导致颜色样式不生效。
补充：你的Tailwind配置、全局引入逻辑均正常，问题完全出在类名写法上。

优先推荐第一种方案，性能更好、维护成本更低：

• 方案1：替换动态拼接写法，使用完整类名映射
  不要存储动态的颜色片段，直接在映射表中写全所有状态对应的完整Tailwind类名，保证Tailwind扫描时可以识别到所有用到的类。
  修正后的components/customAlert.tsx代码参考：

  export default function customAlert(status: string, title: string, message: string) {
    // 映射表中直接写完整类名，禁止字符串拼接
    const types: {[key: string]: {header: string, body: string}} = {
      success: {
        header: "bg-green-500 text-white font-bold rounded-t px-4 py-2",
        body: "border border-t-0 border-green-400 rounded-b bg-green-100 px-4 py-3 text-green-700"
      },
      error: {
        header: "bg-red-500 text-white font-bold rounded-t px-4 py-2",
        body: "border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"
      },
      warning: {
        header: "bg-yellow-500 text-white font-bold rounded-t px-4 py-2",
        body: "border border-t-0 border-yellow-400 rounded-b bg-yellow-100 px-4 py-3 text-yellow-700"
      }
    }
    const typeStyle = types[status]
  
    return (
      <>
        <div id="alert" className="absolute bottom-0 right-0 mb-4 mr-4">
          <div className={typeStyle.header}>
            {title}
          </div>
          <div className={typeStyle.body}>
            <p>{message}</p>
          </div>
        </div>
      </>
    )
  }
  

• 方案2：配置Tailwind安全列表（safelist）
  如果你一定要保留动态拼接类名的写法，可以在tailwind.config.js中配置safelist，强制Tailwind打包时生成指定类的样式，配置参考：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./components/**/*.{js,ts,jsx,tsx}",
    ],
    // 强制生成以下类的样式
    safelist: [
      "bg-green-500", "border-green-400", "bg-green-100", "text-green-700",
      "bg-red-500", "border-red-400", "bg-red-100", "text-red-700",
      "bg-yellow-500", "border-yellow-400", "bg-yellow-100", "text-yellow-700"
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

  该方案的缺点是需要手动维护所有用到的动态类名，且会增大最终CSS包体积，非必要不推荐。

额外优化建议：你当前的customAlert是普通函数形式直接传参调用，不符合React组件规范，后续如果要在组件内使用React Hooks会直接报错。建议改成标准React组件形式，通过props接收参数，调用时使用JSX标签写法。

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