Next.js+Tailwind CSS中rounded-lg/rounded-md失效问题求助

我当前使用的技术栈：Next.js 14.2.4、Tailwind CSS 3.4.1、shadcn-ui。遇到的问题是：rounded-lg和rounded-md类完全没有圆角效果，但rounded-xl、rounded等其他圆角类都能正常工作。

已排查情况：

• 同配置的其他项目无此问题
• 部署到生产环境后问题依旧
• 更换不同浏览器测试，现象一致

附上我的package.json文件：

{
  "name": "party-bracket",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-alert-dialog": "^1.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.400.0",
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.4",
    "postcss": "^8",
    "prettier": "^3.3.2",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

可能的排查方向及解决方案： #

1. 检查Tailwind配置文件
   查看tailwind.config.js里是否自定义覆盖了borderRadius配置，比如误删了md/lg的预设值，或者将其设为0。默认Tailwind中md对应0.375rem，lg对应0.5rem，若被覆盖会直接失效。

   • 错误示例：

     module.exports = {
       theme: {
         borderRadius: {
           xl: '0.75rem',
           full: '9999px',
           // 缺失md/lg配置
         },
       },
     }
     

   • 修复方式：恢复默认配置，或手动补充对应值：

     module.exports = {
       theme: {
         borderRadius: {
           ...require('tailwindcss/defaultTheme').borderRadius,
           // 自定义其他圆角值
         },
       },
     }
     

2. 排查CSS优先级冲突
   检查全局CSS或组件内的自定义样式是否覆盖了border-radius属性，比如是否存在border-radius: 0 !important这类强制覆盖规则。可以通过浏览器开发者工具的Styles面板，查看目标元素的border-radius属性是否被划掉，定位覆盖样式的来源。

3. 检查shadcn-ui组件的变体配置
   如果使用shadcn-ui的自定义组件，部分组件可能通过class-variance-authority（CVA）管理样式变体，确认是否在变体定义中误将md/lg的圆角设为无效值（比如rounded-none）。

   • 错误示例：

     const buttonVariants = cva('...', {
       variants: {
         rounded: {
           md: 'rounded-none',
           lg: 'rounded-none',
         },
       },
     })
     

4. 清理缓存重新构建
   删除.next文件夹和node_modules/.cache，重新安装依赖并构建：

   rm -rf .next node_modules/.cache
   npm install
   npm run build
   

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