Next.js项目中Header背景未变红、字体未切换为Coiny的问题

1. 验证Tailwind基础配置是否到位 #

• 检查tailwind.config.js的content字段，确保Next.js的页面、组件路径被正确纳入扫描范围，Tailwind只会处理这些路径下的类名：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./app/**/*.{js,ts,jsx,tsx,mdx}", // App Router 项目路径
      "./pages/**/*.{js,ts,jsx,tsx,mdx}", // Pages Router 项目路径
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 确认global.css（或globals.css）中Tailwind指令的顺序正确，且没有遗漏：

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

• 保证global.css已在全局入口文件中导入：

  // Pages Router: _app.js
  import '../styles/global.css'
  
  export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />
  }
  

2. 解决font-coiny字体不生效问题 #

• 先完成字体引入：
  若用Google Fonts，在_document.js（Pages Router）或layout.js（App Router）的<head>中添加字体链接：

  // Pages Router: _document.js
  import Document, { Html, Head, Main, NextScript } from 'next/document'
  
  class MyDocument extends Document {
    render() {
      return (
        <Html>
          <Head>
            <link href="https://fonts.googleapis.com/css2?family=Coiny&display=swap" rel="stylesheet" />
          </Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }
  }
  
  export default MyDocument
  

  若用本地字体，将字体文件放入public/fonts，在global.css中定义：

  @font-face {
    font-family: 'Coiny';
    src: url('/fonts/Coiny-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  

• 在tailwind.config.js中扩展字体族：

  module.exports = {
    theme: {
      extend: {
        fontFamily: {
          coiny: ['Coiny', 'cursive'],
        },
      },
    },
  }
  

• 检查h1元素类名拼写，确认是font-coiny而非大小写错误或其他变体。

3. 排查bg-red-700背景色不生效问题 #

• 打开浏览器开发者工具（F12），查看main元素的样式面板：
  • 若background-color: rgb(185 28 28);被划掉，说明被更高优先级样式覆盖，可调整Tailwind类名顺序（后写的类优先级更高），或临时用!bg-red-700强制提升优先级（不推荐滥用）。
  • 检查全局CSS中是否存在main { background-color: xxx !important; }这类强制规则，这类规则会直接覆盖Tailwind类。

4. 清除缓存与重建项目 #

• 重启Next.js开发服务器（停止npm run dev后重新启动），避免开发环境缓存导致样式不更新。
• 用Ctrl+Shift+R硬刷新浏览器，清除客户端CSS缓存。
• 生产环境下执行npm run build && npm start，确保最新样式被打包部署。

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