Tailwind CSS

Definition

A utility-first CSS framework packed with classes like `flex`, `pt-4`, `text-center`, and `rotate-90` that can be composed to build any design, directly in your markup.

Explain Like I'm New

You almost never write custom CSS again. Instead of creating a `.card` class and writing 10 lines of CSS, you just slap 10 pre-made utility classes directly onto the HTML element: `<div class="bg-white rounded-lg shadow-md p-6">`. It looks ugly in the HTML, but it allows you to build UIs 10x faster.

Real World Example

The absolute industry standard for modern React and Next.js development. It removes the need to ever switch back and forth between your HTML file and your CSS file.

Common Use Cases

•Rapid prototyping
•Massive team environments where naming CSS classes causes arguments

Interactive Example

Interview Questions

basic

What does 'utility-first' mean?

intermediate

If you put 50 Tailwind classes on an element, doesn't it make the final CSS file massive?

Flash Cards

Question

Utility-first?

Click to reveal answer

Answer

It means the framework doesn't give you pre-built components (like a `<button class="btn-primary">`). It gives you low-level utilities (like `bg-blue-500`, `text-white`, `px-4`) that do exactly one thing, and you combine them to build the component yourself.

Question

Massive CSS file?

Click to reveal answer

Answer

No! Tailwind has a compiler (PurgeCSS). Before deploying to production, it scans your HTML, finds exactly which utility classes you actually used, and deletes the other 95% of the framework. Tailwind production CSS files are often incredibly tiny (under 10kb).