Codesandbox中Tailwind的rounded-xl及以上圆角类无法生效问题

针对你遇到的rounded-sm/md/lg正常生效，但rounded-xl/2xl和任意圆角值失效的问题，核心原因通常是Tailwind配置缺失或编译扫描未覆盖目标文件，以下是具体排查和解决步骤：

1. 检查tailwind.config.js的theme.rounded配置 #

如果你的配置文件中自定义了theme.rounded但未包含xl、2xl等尺寸，会直接覆盖Tailwind默认的圆角尺寸集，导致这些类消失。

• 错误示例（覆盖默认配置，丢失xl/2xl）：

module.exports = {
  theme: {
    rounded: {
      sm: '0.125rem',
      md: '0.375rem',
      lg: '0.5rem',
    },
  },
}

• 正确做法（扩展默认配置，保留原有尺寸）：

module.exports = {
  theme: {
    extend: {
      rounded: {
        // 仅添加自定义尺寸，默认的sm/md/lg/xl/2xl等会自动保留
        '3xl': '1.5rem',
      },
    },
  },
}

若无需自定义圆角，直接删除theme.rounded配置，使用Tailwind默认值即可。

2. 确保content配置覆盖所有使用Tailwind类的文件 #

Tailwind会根据content数组中的路径扫描文件，仅生成扫描到的类对应的CSS。如果你的组件文件（比如App.jsx）不在content范围内，rounded-xl这类未被扫描到的类就不会被编译。

修改tailwind.config.js的content配置，确保覆盖所有相关文件：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // 匹配src目录下所有js/jsx/ts/tsx文件
    "./public/index.html",
  ],
  // ...其他配置项
}

3. 重新编译CSS并验证 #

修改配置后，需要重新运行编译命令，确保tailwind.output.css更新为最新版本：

• 开发环境：重启开发服务器（如npm run dev）
• 生产环境：重新执行构建命令（如npm run build）

4. 关于任意圆角值的支持 #

Tailwind 3.x默认支持任意值（如rounded-[10px]），若任意值不生效，需确认：

• content配置已扫描到使用该任意值的文件
• 未在配置中禁用任意值（默认启用，除非设置了corePlugins: { arbitraryValues: false }）

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