Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS classes, you compose designs by applying small, single-purpose utility classes directly in HTML or JSX.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS classes, you compose designs by applying small, single-purpose utility classes directly in HTML or JSX.

Rishtaara itself uses Tailwind v4. Tailwind powers GitHub, Shopify, NASA, and thousands of modern products because it speeds up development and keeps design consistent.

Utility-first vs traditional CSS

Traditional: write .card { padding: 1rem; border-radius: 8px; } in a CSS file.
Tailwind: <div className='p-4 rounded-lg border'> — styles live in markup.
Benefits: no naming fatigue, no unused CSS, consistent design tokens, fast iteration.
Tradeoff: longer class strings — solved with @apply or component extraction.