//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
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.