Next.js 13中Tailwind CSS自定义尺寸类不生效问题求助

核心原因 #

Tailwind CSS v3的JIT（即时编译）模式只会生成在配置文件指定路径中实际出现的类。如果你的组件文件不在tailwind.config.js的content扫描范围内，那些自定义的长度类（比如w-[21rem]、py-[21px]）就不会被编译，自然无法生效。

具体解决步骤 #

1. 检查并更新Tailwind配置文件
   打开项目根目录的tailwind.config.js，确保content字段包含所有存放组件的目录。适配Next.js 13的配置示例如下：

   /** @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}", // 组件目录
       "./src/**/*.{js,ts,jsx,tsx,mdx}",    // 若组件存放在src目录需添加
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

2. 重启开发服务器
   修改配置后，必须停止当前npm run dev进程并重新启动，让Tailwind重新扫描所有文件并生成需要的类。

3. 清除缓存（可选）
   若重启后问题仍存在，删除项目根目录的.next文件夹，再重新启动开发服务器，清除Next.js和Tailwind的缓存。

4. 检查类名拼写
   确认自定义类名无拼写错误，比如不要把py-[21px]写成py-[21pxx]，或遗漏括号。

额外说明 #

你提到部分自定义px值（如w-[220px]）能生效，大概率是因为这些类刚好在其他被Tailwind扫描到的文件中出现过，因此被提前编译了。

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