Tailwind CSS max-w类失效问题怎么解决？

• 检查Tailwind配置的content路径
  确保新页面的HTML/JSX文件被包含在tailwind.config.js的content数组中，JIT模式只会为content匹配到的文件生成对应样式。示例配置：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
      "./public/index.html",
      // 新增新页面的路径，比如"./src/pages/new-page/**/*.{js,jsx}"
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 清除缓存并重新构建
  构建缓存可能导致样式未更新，执行对应操作：

  • 框架缓存清除：比如React项目执行npm start -- --reset-cache
  • 手动删除项目的dist/build目录、node_modules/.cache文件夹后重新执行构建命令

• 排查样式优先级冲突
  打开浏览器开发者工具（F12）查看元素的样式面板：

  • 确认是否有其他max-w-*类（如max-w-none）在max-w-[80em]之后加载，覆盖了样式
  • 检查是否有自定义CSS中的max-width属性使用!important强制覆盖

• 校验自定义类的拼写格式
  确认新页面中类名书写正确：max-w-[80em]，使用英文方括号，无多余空格，单位em未写错

• 确认Tailwind版本与JIT模式状态
  自定义方括号类依赖JIT模式：

  • 若使用Tailwind v3.x，JIT默认开启，确保版本正确
  • 若使用Tailwind v2.x，需在配置中手动开启mode: 'jit'

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