Core Concepts
This chapter introduces you to Tailwind’s design principles and core building blocks — everything from utility-first design, to the config file, to how responsive styles work.
1. Tailwind Uses Utility-First Classes
Instead of writing CSS in a separate stylesheet, Tailwind’s utility-first approach lets you apply utility classes directly to HTML elements to style them. This keeps your styles tightly integrated with the structure and content of your webpage.
For example, to make a paragraph pink and centered:
<p class="text-pink-500 text-center">Hello, Tailwind.</p>2. Customizing with Configuration
Tailwind gives you full control over your design through the tailwind.config.js file. This powerful configuration allows you to define custom colors, fonts, spacing, and more — ensuring everything is aligned with your project's theme and style.
3. Responsive Design Made Simple
Tailwind makes it easy to create responsive user interfaces with responsive variants that you can apply directly to any utility class. Breakpoints and layout adjustments can be configured and applied using the same utility-based syntax you're already using.
<div class="flex md:grid md:grid-cols-3">...</div>4. Custom Components & Reusability
While Tailwind is utility-first, it gives you tools to create custom components for reusable elements using the @apply directive in your PostCSS configuration, allowing you to build custom classes based on your utilities.
.btn { @apply px-4 py-2 bg-blue-600 text-white rounded-md }5. Dark Mode Support
Tailwind provides first-class support for building dark mode UIs. You can toggle dark mode with a single class or enable it globally depending on user preferences or operating system settings.
<html class="dark">6. Working with Frameworks
Tailwind works seamlessly with the latest frontend frameworks like React, Vue, and Svelte. You can integrate Tailwind directly into your component-based projects to create consistent, styled interfaces without writing custom CSS.