What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your HTML. Instead of writing custom CSS, you compose designs by applying pre-existing classes.

Unlike Bootstrap which gives you opinionated components, Tailwind gives you building blocks that you combine to create any design.

Example

<!-- Traditional CSS approach -->
<!-- <div class="card">...</div> -->

<!-- Tailwind utility-first approach -->
<div class="bg-white rounded-xl shadow-md p-6 max-w-sm mx-auto">
  <img class="w-full rounded-lg mb-4" src="photo.jpg" alt="">
  <div>
    <h2 class="text-xl font-bold text-gray-900 mb-2">Card Title</h2>
    <p class="text-gray-600 text-sm leading-relaxed">
      This card is built entirely with Tailwind utilities.
      No custom CSS needed!
    </p>
    <button class="mt-4 bg-indigo-600 hover:bg-indigo-700 text-white
                   font-semibold py-2 px-4 rounded-lg transition-colors">
      Learn More
    </button>
  </div>
</div>

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