Next.js项目中Tailwind部分类重启服务器后失效问题咨询

在Next.js项目中使用Tailwind CSS时，执行npm run dev重启服务器后，部分Tailwind样式类无法生效，但在浏览器检查元素中手动写入对应样式属性可以正常生效。失效的样式类包括：

• w-1/2（对应width: 50%）
• lg:w-0（对应@media screen and (max-width: 1024px)下的样式）

配置文件内容 #

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    screens: {
      sm: { max: "640px" },
      md: { max: "768px" },
      lg: { max: "1024px" },
      xl: { max: "1280px" },
      "2xl": { max: "1536px" },
    }
  },
  plugins: [],
};

global.css #

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

@import "./reset.css";

1. w-1/2失效修复 #

Tailwind的JIT模式只会生成代码中实际用到的样式类，w-1/2失效大概率是因为未被检测到：

• 确认使用w-1/2的文件路径在tailwind.config.js的content数组中，若文件在其他目录需补充路径；
• 重启服务器前确保所有使用该类的文件已保存，未保存文件不会被扫描；
• 若为动态生成的类名（如w-${value}），Tailwind无法识别，需改用明确类名，或在配置中添加安全列表：

  module.exports = {
    safelist: ['w-1/2'],
    // 其他配置...
  }
  

2. lg:w-0失效修复 #

你的screens配置存在语法错误，生成的媒体查询缺少空格，导致浏览器无法识别：

• 将screens中的对象格式改为字符串格式，补充媒体查询的空格：

  theme: {
    screens: {
      sm: "(max-width: 640px)",
      md: "(max-width: 768px)",
      lg: "(max-width: 1024px)",
      xl: "(max-width: 1280px)",
      "2xl": "(max-width: 1536px)",
    }
  }
  

• 若需桌面端优先的断点（lg代表≥1024px），则去掉max，直接写宽度值：

  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    }
  }
  

3. 额外优化项 #

• 调整global.css中导入顺序，避免样式覆盖：

  @import "./reset.css";
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• 强制刷新浏览器（Ctrl+Shift+R）清除旧CSS缓存，确保新样式生效。

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