无_app.js时在Next.js多页面中使用TailwindCSS遇阻

方案1：在页面组件中直接注入Tailwind样式（无需依赖外部文件） #

每个独立页面通过next/head组件直接注入Tailwind核心指令，无需全局样式文件和自定义_app.js：

import Head from 'next/head';

export default function AboutPage() {
  return (
    <>
      <Head>
        <style dangerouslySetInnerHTML={{ __html: `
          @tailwind base;
          @tailwind components;
          @tailwind utilities;
        ` }} />
      </Head>
      <div className="bg-blue-500 text-white p-8 rounded-lg">关于我们</div>
    </>
  );
}

嫌重复的话，可以把样式注入逻辑抽成复用组件（比如TailwindStyle.js），每个页面导入即可。

方案2：引入Tailwind CDN链接（快速上手） #

直接在页面<head>里引入Tailwind的CDN样式文件，适合快速原型开发：

import Head from 'next/head';

export default function ForumPage() {
  return (
    <>
      <Head>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.0/dist/tailwind.min.css" rel="stylesheet" />
      </Head>
      <div className="bg-green-500 text-white p-8 rounded-lg">论坛页面</div>
    </>
  );
}

注意：这种方式无法使用自定义Tailwind配置（比如自定义主题色），且依赖网络环境。

方案3：编译全局Tailwind样式后作为静态资源引入 #

1. 按正常流程配置Tailwind：创建tailwind.config.js、postcss.config.js，在styles/tailwind.css中写入@tailwind base; @tailwind components; @tailwind utilities;
2. 运行编译命令生成最终CSS文件：npx tailwindcss -i ./styles/tailwind.css -o ./public/styles/tailwind.css
3. 在每个页面的<head>里通过<link>标签引入静态资源：

import Head from 'next/head';

export default function AboutPage() {
  return (
    <>
      <Head>
        <link href="/styles/tailwind.css" rel="stylesheet" />
      </Head>
      <div className="bg-red-500 text-white p-8 rounded-lg">关于我们</div>
    </>
  );
}

这种方式支持自定义Tailwind配置，且不依赖CDN。

解决Tailwind在CSS Modules中不生效的问题 #

如果想在.module.css中使用Tailwind的@apply指令，修改tailwind.config.js让Tailwind扫描你的CSS Modules文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './styles/**/*.module.css', // 添加这行，识别CSS Modules文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

之后就可以在CSS Modules中使用@apply：

/* styles/About.module.css */
.pageContainer {
  @apply bg-blue-500 text-white p-8 rounded-lg;
}

页面组件中正常导入使用：

import styles from '../styles/About.module.css';

export default function AboutPage() {
  return <div className={styles.pageContainer}>关于我们</div>;
}

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