Utility-First CSS with Tailwind

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML.

The Utility-First Approach

Instead of writing custom CSS, you apply pre-existing classes directly in your HTML.

Traditional CSS:

CSS
.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background-color: #3490dc;
  color: white;
  font-weight: 600;
}

With Tailwind:

HTML
<button class="py-2 px-4 rounded bg-blue-500 text-white font-semibold">
  Button
</button>

Common Utility Classes

• Spacing: p-4 (padding), m-2 (margin)
• Typography: text-lg, font-bold
• Colors: text-blue-500, bg-gray-200
• Flexbox: flex, items-center
• Grid: grid, grid-cols-3
• Responsive: md:flex, lg:text-xl

Your Task

Create a simple card component using Tailwind utility classes:

1. Create a card with padding and rounded corners
2. Add a heading, paragraph, and button
3. Style them using Tailwind classes
4. Make it responsive (different on mobile vs desktop)