What is Tailwind?
Tailwind CSS is a design system framework for developers. Instead of inventing custom styles every time, it provides a predefined set of design tokens (colors, spacing, typography, borders, shadows, etc.) that can be combined to build any UI.
What Are Utility Classes?
Utility classes in Tailwind CSS are small, single-purpose classes that allow you to control a specific property directly in HTML.
They help UX & UI designers rapidly build layouts, typography, colors, and spacing without writing custom CSS, keeping your design consistent and maintainable.
Fonts
Tailwind provides font families, sizes, weights, and more:
.font-sans → Sans-serif
.font-serif → Serif
.font-mono → Monospace
.text-lg → Large text
.font-semibold → Medium boldness
This is sans-serif
This is serif
This is monospace
Large bold text
Medium bold text
Colors
Text, background, border, and hover colors are all utility classes:
.text-red-500 → Red text
.bg-blue-200 → Blue background
.border-green-500 → Green border
.hover:bg-yellow-200 → Yellow background on hover
Red text
Grids
Use Tailwind's grid system for layout:
.grid → Enable grid layout
.grid-cols-2 → 2 columns
.gap-4 → Spacing between items
UI Elements
Buttons, cards, alerts, and more can be styled quickly:
.btn → Button styling
.rounded → Rounded corners
.shadow → Box shadow
.p-4 → Padding
Tables
Tables can be quickly styled with borders, stripes, and responsive scrolling:
.table-auto → Automatic table layout
.border → Add border
.bg-gray-50 → Stripe background
.overflow-x-auto → Scroll on small screens
| Name | Age | City |
|---|---|---|
| Alice | 25 | New York |
| Bob | 30 | Los Angeles |