Tailwind CSS Tailwind Introduction What Is Tailwind CSS and the Utility-First Philosophy

Tailwind CSS Beginner 1 min read

What Is Tailwind CSS and the Utility-First Philosophy

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes you compose directly in your HTML to build any design without writing custom CSS. Unlike component-based frameworks such as Bootstrap, Tailwind does not ship pre-built UI components — instead it gives you building blocks like text-center, bg-blue-500, and px-4 that you combine freely to construct any interface you can imagine. The utility-first philosophy means you style elements by applying small, single-purpose classes rather than writing semantic class names tied to CSS rules. This eliminates the overhead of naming things, reduces specificity conflicts, and keeps all styling concerns co-located with your markup. Because each class does exactly one thing, you always know which class controls which visual property. Tailwind ships with a carefully designed default design system — spacing scale, color palette, typography sizes, breakpoints — that keeps your project visually consistent without any extra configuration. The framework is highly customisable through tailwind.config.js, and its JIT (Just-In-Time) compiler means only the classes you actually use end up in your production CSS bundle, resulting in tiny file sizes.

Example

<!-- Traditional CSS approach: write custom class, then style it in a stylesheet -->
<!-- HTML -->
<div class="card">
  <h2 class="card-title">Hello World</h2>
  <p class="card-body">Some content here.</p>
</div>

<!-- CSS (separate file) -->
/*
.card       { background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.card-body  { color: #6b7280; }
*/

<!-- ─────────────────────────────────────────── -->

<!-- Tailwind utility-first approach: style entirely in HTML -->
<div class="bg-white rounded-lg p-4 shadow-md">
  <h2 class="text-xl font-bold mb-2">Hello World</h2>
  <p class="text-gray-500">Some content here.</p>
</div>

<!-- No custom CSS needed at all. Each class does one thing:
     bg-white     → background-color: #ffffff
     rounded-lg   → border-radius: 0.5rem
     p-4          → padding: 1rem
     shadow-md    → box-shadow: medium shadow
     text-xl      → font-size: 1.25rem
     font-bold    → font-weight: 700
     mb-2         → margin-bottom: 0.5rem
     text-gray-500→ color: #6b7280
-->

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned