Building a React + Tailwind UI

React and Tailwind are a perfect match. React handles the component logic, and Tailwind handles the styling without needing separate CSS files.

Remember to use className instead of class!

function ProductCard({ name, price, inStock }) {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg bg-white border border-gray-200">
      <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2 text-gray-800">{name}</div>
        <p className="text-gray-700 text-base">
          $${price.toFixed(2)}
        </p>
      </div>
      <div className="px-6 pt-4 pb-2">
        <span className={`inline-block rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2 ${inStock ? 'bg-green-200 text-green-800' : 'bg-red-200 text-red-800'}`}>
          {inStock ? 'In Stock' : 'Out of Stock'}
        </span>
      </div>
    </div>
  );
}

Exercise

Click Try It Yourself and experiment with creating your own React components styled with Tailwind!