What is Tailwind CSS?

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Instead of pre-made component classes like .btn or .card, it gives you tiny, single-purpose utility classes that you combine directly in your HTML.

How it works

Tailwind works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles, and then writing them to a static CSS file.

It's fast, flexible, and reliable - with zero-runtime. There is no JavaScript running in the browser to apply styles.

Utility-first, not component-first

With Bootstrap you pick pre-built components. With Tailwind you compose your own design from low-level utilities:

<button class="rounded-lg bg-sky-500 px-4 py-2 font-medium text-white hover:bg-sky-700">
  Save changes
</button>

Each class does one small thing: rounded-lg rounds the corners, bg-sky-500 sets the background, px-4/py-2 add padding, and hover:bg-sky-700 changes the color on hover.

Why people love it

• You get things done faster - no class-name decisions, no switching between HTML and CSS files.
• Making changes feels safer - adding or removing a class only affects that element.
• Maintaining old projects is easier - change the classes right where the element lives.
• Your CSS stops growing - utilities are reusable, so CSS doesn't grow with every feature.
• Your code is more portable - copy and paste whole chunks of UI between projects.

Tailwind CSS v4

This course covers Tailwind CSS v4, which moved configuration from a JavaScript file into CSS using the @theme directive and CSS variables. It also introduced a dynamic spacing scale based on --spacing.

TL;DR

• Tailwind is a utility-first CSS framework.
• You style by combining small classes in HTML.
• It generates only the CSS you actually use.
• v4 is configured in CSS, not JavaScript.