Getting Started
Introduction
Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS, you style elements by combining small, single-purpose classes like flex, pt-4, text-center and text-blue-600 directly in your HTML.
What is Tailwind CSS?
Traditional CSS asks you to invent class names (like "card" or "btn-primary") and write the rules in a separate stylesheet. Tailwind flips this around: it ships thousands of tiny utility classes that each do one thing, and you compose them right in your markup. You almost never leave your HTML.
<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md p-6">
<h2 class="text-xl font-bold text-gray-900">Intern of the Month</h2>
<p class="mt-2 text-gray-600">Built with utility classes — no custom CSS.</p>
<button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-lg">
View profile
</button>
</div>Why developers love it
- Speed: you build UIs without switching between HTML and CSS files or naming things.
- Consistency: spacing, colors and font sizes come from a shared design system (a scale), so your UI stays uniform.
- Responsive & state variants: prefixes like md: and hover: let you style breakpoints and interactions inline.
- Small production CSS: unused classes are removed at build time, so the final CSS file is tiny.
Every code example in this course has a "Try it Yourself" button — edit the classes and see the result update live.
Is it just inline styles?
No. Inline styles cannot do hover, focus, responsive breakpoints, or pull from a consistent design scale. Tailwind utilities can, and they are constrained to a sensible set of values, which keeps your design tidy.