Tailwind CSS: Utility-First CSS Framework Guide

Tailwind CSS is a utility-first CSS framework that takes a fundamentally different approach to styling — instead of predefined components, you compose styles from small utility classes applied directly in your HTML. This post explains what makes Tailwind unique, how it compares to Bootstrap, the JIT compiler, and how to use it to build modern, responsive UIs efficiently.

What is Tailwind?

Tailwind is a CSS framework. It's similar to other frameworks like Bootstrap and Bulma. It stands out from the crowd because of the approach it takes with CSS. Let's talk about how Bootstrap approaches CSS. Bootstrap comes with classes for building UI elements. For example, let's say we wanted to use the card components like below:

<div class="card">

<div class="card-body">

<h5 class="card-title">Card title </h5>

<p class="card-text">Card Content </p>

</div>

</div>

The above code snippet shows how a card component can be created with Bootstrap. We need to create some div tags and slap some classes on them. It's pretty simple. The biggest criticism of bootstrap is how similar a lot of sites look. It's because Bootstrap takes care of defining a predefined set of components. These components are ready to go out of the box. Customizing them is completely optional.

Tailwind does not focus on UI elements. If you were to browse the documentation, you won't encounter many UI elements. Instead, Tailwind focuses on utility classes. What does that exactly mean? Tailwind will define hundreds of classes. Each class will modify one property. For example, there's a class called m-4 will set the margins of an element to 1rem.

.m-4{
margin: 1rem;
}

There aren't any other properties under this class. On the other hand, a bootstrap class can modify multiple properties of an element. For this reason, Tailwind has a larger learning curve. It's a framework that demands a solid knowledge of CSS.

Install Tailwind CSS

npm i -D tailwindcss postcss autoprefixer

Below command will generate the configuration files for Tailwind and postCSS.

npx tailwindcss init -p

After run the cmd, tailwind will generate tailwind.config.js like below

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}

We have to follow the configuration step from the documentation page. https://tailwindcss.com/docs/guides/vite

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

We have to copy and paste two items in content array. The first item is index.html file. The second item is a pattern. Tailwind will search for classes in all files in the source directory. If a file has vue or javascript extension, Tailwind will search through these files. That's all we need.

Tailwind classes aren't automatically injected into our project. We need to tell it where to load its styles. Below directives will perform that action.

in base.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Frequently Asked Questions

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes (like flex, pt-4, text-center) that you compose directly in your HTML to build custom designs without writing custom CSS or fighting framework component styles.

What is the difference between Tailwind CSS and Bootstrap?

Bootstrap provides pre-designed, opinionated UI components (buttons, navbars, cards) that share a recognizable Bootstrap look; Tailwind provides utility classes with no pre-built components, giving you complete design freedom but requiring more initial design decisions.