How to apply rounded corners to the 'ProjectItem' component using Tailwind CSS

Question

I'm working on a React project, and I'm trying to apply rounded corners to the 'ProjectItem' component using Tailwind CSS. However, my attempts to add rounded corners using the 'rounded-lg' class don't seem to work. I've tried the following code:

import React from 'react';

const ProjectItem = (props) => {
    const { project } = props;

    const cardStyles = {
        borderRadius: '16px',
    };

    return (
        <div className='flex justify-center space-x-4'>
            <div className='p-4 shadow-md w-1/3 mx-3' style={cardStyles}>

                <div className="max-w-sm bg-white rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
                    <a href="/">
                        <img className="rounded-lg" src='/' alt="" />
                    </a>
                    <div className="p-5" style={{ background: "#0e0e1a", margin: "-17px" }}>
                        <a href="/">
                            <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{project.name}</h5>
                        </a>
                        <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">{project.description}</p>
                        <a href="/" className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                            Read more
                            <svg className="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                            </svg>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    )
}

export default ProjectItem;

I expected the 'ProjectItem' component to have rounded corners, but it's not working as intended. Am I missing something in my implementation? Is there any other class or style that might be overriding the rounded corners?

I'd appreciate any insights or suggestions on how to correctly apply rounded corners to the 'ProjectItem' component using Tailwind CSS. Thank you in advance for your help!

Answer 1

Is this what you want? I achieved it by moving the cardStyles to the sibling instead.

Working example in CodeSandbox

const App = () => {
   const cardStyles = {
      borderRadius: '16px',
   };
   return (
      <div className="flex justify-center space-x-4">
         <div className="p-4 shadow-md w-1/3 mx-3">
            <div className="max-w-sm bg-white rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
               <a href="/">
                  <img className="rounded-lg" src="/" alt="" />
               </a>
               <div
                  className="p-5"
                  style={{
                     background: '#0e0e1a',
                     margin: '-17px',
                     ...cardStyles,
                  }}
               >
                  ...
               </div>
            </div>
         </div>
      </div>
   );
};

export default App;