tailwind classes not working when i transfer through props while working perfecly when i use cdn link of tailwind css

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

//Button.jsx

import React from 'react';

const Button = (props) => {
  let color = props.color || 'blue';

  return (
    <button className={`px-4 py-2 font-bold text-black bg-${color}-500 rounded-full hover:bg-${color}-700 focus:outline-none focus:shadow-outline`}>
      Click
    </button>
  );
};

export default Button;


// App.jsx
import Button from "./Button"
import './index.css'
function App() {


  return (
    <div>
       <Button >Click me!</Button>
      <Button color="red">Click me!</Button>
      <Button color="green">Click me!</Button>
    </div>
    )
}

export default App  

<!-- end snippet -->

this is a component where i'm transferring background color using props

i don't know what's wrong... same code just when i add cdn link of tailwindcss in html page it work but don't work without cdn.
if i will transfer bg-red-500 whole class as props then it works but if i send only red as props then it doesn't work.
even in inspect page i can see classes but they're not taking effect.
i'm using vite-react.

I think your forgetting a step, did you do @tailwind base;
@tailwind components;
@tailwind utilities; in your main css?
The getting started also shows one more extra step: https://tailwindcss.com/docs/installation