为什么 rounded-lg 和 rounded-md 不能与 Tailwind CSS 配合使用？

Question

我正在使用 Next.js 14.2.4 和 tailwindcss 3.4.1，由于某种原因 rounded-lg 和 rounded-md 不起作用。它们提供零边界半径。 rounded-xl 和 rounded 以及所有其他都工作得很好。我也在使用 shadcn-ui 。我不知道是什么原因导致这个问题。我还有其他运行良好的应用程序。我部署了我的应用程序，但问题仍然存在于生产中。我还使用了不同的网络浏览器，问题仍然存在。有人遇到过这个问题吗？

这是我的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"
  }
}

Answer 1

我刚刚发现问题了。在我的 tailwind.config.ts 文件中，我有：

  borderRadius: {
    lg: "var(--radius)",
    md: "calc(var(--radius) - 2px)",
    sm: "calc(var(--radius) - 4px)",
  },

我更新了 globals.css 中的 :root ，不将 --radius 作为变量。通过重新添加变量或删除这部分代码，它会再次正常工作。