Next.js的tailwindcss如何全局配置？

Question

nextjs创建项目，使用src目录、使用tailwindcss。

npx create-next-app@latest

1. 修改src/app/page.tsx内容为如下代码，运行项目，访问http://localhost:3000/可以看到tailwindcss是生效的，覆盖了h1的默认样式

   import Link from "next/link";
   
   export default function Home() {
     return (
      <h1>Homepage</h1>
     );
   }

2. 创建src/pages目录

3. 创建src/pages/my-test/demo.tsx文件，内容如下，访问http://localhost:3000/my-test/demo发现tailwindcss没有生效

   export default function MyTestDemo() {
     return (
      <h1>Demo</h1>
     );
   }

问题：网上教程能试的都试过了，没有一个是全局生效的，难道要在每个页面都手动引入globals.css吗？还是我的项目结构有问题（src不能和pages一起用）？

Answer 1

完全没有遇到类似的问题，建议把完整的项目脚手架放出来看看。

其它建议：

1. 确认版本号。最近发布的 tailwindcss 是 v4，如果你看的是老教程，那很可能不对。
2. 找一个参考项目，照抄过来。记得版本号要一模一样。没记错的话 Vercel 官方做过很多可以参考的项目。