دمج Tailwind مع React Components.

// Button.jsx export default function Button({ children, variant = "primary" }) { const base = "px-4 py-2 rounded-lg font-semibold transition duration-200"; const styles = { primary: "bg-blue-600 text-white hover:bg-blue-700", secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300", danger: "bg-red-600 text-white hover:bg-red-700", }; return <button className={`${base} ${styles[variant]}`}>{children}</button>; }

// Card.jsx export default function Card({ title, children, shadow = "md" }) { return ( <div className={`p-6 rounded-xl bg-white shadow-${shadow}`}> <h2 className="text-xl font-bold mb-2">{title}</h2> <div>{children}</div> </div> ); }

<Card title="Basic Card">Hello World</Card> <Card title="Deep Shadow" shadow="xl">With Extra Shadow</Card>