rounded-xl and above tailwind classes not working in codesandbox

Question

"rounded-sm", "rounded-md", and "rounded-lg" are working in my project but other classes "rounded-xl", "rounded-2xl" etc aren't. Also it's not supporting arbitrary values. Here is my code:

// Dependencies
import React from "react";

// Styles
import "./tailwind.output.css";

const App = () => {
  return (
    <div>
      <div className="h-56 rounded-xl m-12 border-2 border-red-900 w-1/2">
        <img src="./img.jpg" className="rounded-2xl" alt="nature"></img>
      </div>

      <div className="h-16 w-32 m-12 rounded-lg border-2 border-black bg-green-500">
        1
      </div>
    </div>
  );
};

export default App;

And this is the codesandbox link: https://codesandbox.io/s/tailwind-nr9j7j

Note: I'm using "tailwind 3.2.7" in my project.

Answer 1

I think the only thing you need to force the image to be rounded would be an overflow-hidden. I am not sure how/that you are processing the tailwind.css file to get the tailwind.output.css. If you are doing this using a listener and overwrite the file. See that it is actually doing its work since like it is now, the output file does not have a rounded-xl or rounded-2xl class which will lead you to not being able to use these classes

// Dependencies
import React from "react";

// Styles
import "./tailwind.output.css";

const App = () => {
  return (
    <div>
      <div className="h-56 rounded-xl m-12 border-2 border-red-900 w-1/2 overflow-hidden">
        <img src="./img.jpg" className="" alt="nature"></img>
      </div>

      <div className="h-16 w-32 m-12 rounded-lg border-2 border-black bg-green-500">
        1
      </div>
    </div>
  );
};

export default App;

Hope this will help you out.