What is Tailwind CSS

Tailwind CSS is a CSS framework made of thousands of small classes. Each class does one job: p-4 sets padding, text-white makes text white, rounded-lg rounds the corners. You style an element by combining these classes right in its class attribute. This course covers Tailwind CSS 4.

Utility-first

A class that sets one or two CSS properties is called a utility class. Styling a page mostly with such classes is called utility-first. Here is a button made only of utilities:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="rounded-lg bg-indigo-600 px-4 py-2 text-white">
  Add to cart
</button>

Below the code you see a blue button with rounded corners. The first line loads Tailwind right in the browser — the next lesson is about it.

The same in plain CSS

The same button in the usual style needs a class name and a rule in a separate file:

.buy-button {
  border-radius: 0.5rem;
  background-color: #4f46e5;
  padding: 0.5rem 1rem;
  color: white;
}

With Tailwind you do not invent names or switch between HTML and CSS. Styles sit next to the markup, and deleting an element deletes its styling too — no forgotten rules stay behind in a CSS file.

How it differs from inline styles

The style attribute also lives in the markup, but utilities can do things it cannot:

The scale matters most: instead of any number you pick from a consistent set, so the interface looks tidy.

How it differs from Bootstrap

Bootstrap ships ready components: .btn, .card, .navbar. Tailwind ships no components — only building blocks. Your design ends up your own rather than recognisably "Bootstrap".

What the course covers

The running example is a product card: an image, a name, a price and a button. First you style it piece by piece, then you build a landing page and a dashboard out of such cards. Every HTML example works right on the lesson page.

Common mistake

Looking for ready component classes, as in Bootstrap:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<button class="btn btn-primary">Add to cart</button>

The button looks like plain text: Tailwind has no btn or btn-primary classes and silently ignores them. A button is built from utilities, and repeated sets are moved into template components — a separate lesson covers that.