自定义borderRadius配置后Tailwind默认圆角类失效报错问题

问题根源 #

在Tailwind配置中直接修改theme.borderRadius时，会完全覆盖框架自带的默认圆角配置，原本的rounded-lg、rounded-xl、rounded-2xl等类会被全部移除，这就导致：

• 使用@apply引用这些默认类时会报错
• 直接在组件中写这些类也不会生成对应样式

修复方案 #

改用theme.extend.borderRadius来添加自定义圆角值，这样只会扩展默认配置，不会覆盖原有类：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      borderRadius: {
        'sm-6-vw': '7.5vw',
      },
    },
  },
  plugins: [],
}

效果验证 #

修改配置后重新构建项目：

• @apply rounded-2xl可以正常编译，不再报错
• 组件中直接使用rounded-2xl等默认类能正常生效
• 自定义的rounded-sm-6-vw类也可以正常使用

内容的提问来源于stack exchange，提问作者Глеб Кодрик