Unable to add borderRadius in tailwind.config.js. Inside theme.extend property

[asaurabhprsas]

// It works fine
{
  theme: {
    borderRadius: {
      DEFAULT: '10px'
    }
  }
}

// Its not possible
{
  theme: {
    extend: {
      borderRadius: {
        newProperty: "20px"
      }
    }
  }
}

tailwind version = "tailwindcss": "^3.4.3"

[wongjn]

Seems to work in this Tailwind Play which would suggest it could be some other misconfiguration or misuse in your project that is causing your unexpected behavior. Please consider providing a project that reproduces the undesired behavior.

[asaurabhprsas]

Hey, Thank you for your time.
Hers's the link of repo.

LINK

[wongjn]

Thank you. So it seems you haven't actually added your custom border radius to the Tailwind configuration. Consider adding it to your tailwind.config.js file like:

 theme: {
-  extend: {},
+  extend: {
+    borderRadius: {
+      newProperty: "20px"
+    }
+  }
 },

Also, your build system seems to be converting:

<link rel="stylesheet" href="assets/css/style.css">

to

<link rel="assets/css/style.css">

Causing the CSS to not load properly.

Furthermore, it does not seem you've used the round-newProperty string in any of the code that is scanned by Tailwind.