React项目打包后Tailwind的justify-end样式属性丢失如何解决？

我按照Tailwind官方文档搭建了React项目，执行create build命令打包后出现样式问题：开发环境下所有样式运行正常，但生产打包版本中justify-end属性未生效，其余justify-content相关样式可正常工作，通过Chrome DevTools检查也未检索到justify-end类的相关样式信息。

常见原因及修复方案 #

• 类名动态拼接导致Tailwind扫描器未识别
  Tailwind生产环境打包时会通过静态扫描代码中的完整类名字符串生成样式，如果你用了justify-${变量}这类拼接写法，扫描器无法识别到justify-end的完整字符串，就不会将该类打包进生产产物。
  修复方式：不要动态拼接类名，改用完整类名映射的写法，示例如下：

// 错误写法
<div className={`justify-${alignType}`}></div>

// 正确写法
const alignClass = {
  start: 'justify-start',
  end: 'justify-end',
  center: 'justify-center'
}[alignType]
<div className={alignClass}></div>

• tailwind.config.js content路径配置错误
  如果写了justify-end的文件不在Tailwind配置的扫描路径范围内，也会导致该类丢失。
  修复方式：核对tailwind.config.js中的content配置，确保覆盖所有用到Tailwind类名的文件路径和后缀，React项目通用配置参考：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  // 其余配置
}

• 强制保留该类的兜底方案
  如果排查后还是找不到丢失原因，可以将justify-end添加到配置的safelist列表中，强制打包时保留该类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  safelist: ['justify-end'],
  // 其余配置
}

• 排查额外的CSS清理工具
  如果项目中额外引入了PurgeCSS等CSS压缩清理工具，可能会出现误删Tailwind类的情况，暂时禁用这类工具重新打包验证即可定位问题。

内容的提问来源于stack exchange，提问作者Đoàn Ngọc Thưởng