Tailwind CSS is a utility-first CSS framework that lets you build modern user interfaces by applying utility classes directly in your HTML instead of writing custom CSS.

After learning CSS, Tailwind becomes much easier because every utility class represents a CSS property you already know.

---

What is Tailwind CSS?

Traditional CSS

.button {

    background: blue;

    color: white;

    padding: 12px 24px;

    border-radius: 8px;

}

HTML

<button class="button">
    Login
</button>

Tailwind CSS

<button
class="bg-blue-500 text-white px-6 py-3 rounded-lg">
    Login
</button>

Both produce the same result.

---

Why Tailwind CSS?

Benefits:

• Utility-First CSS
• Faster Development
• Consistent Design
• Responsive by Default
• Easy to Maintain
• Small Production CSS

Popular frameworks using Tailwind:

• React
• Next.js
• Astro
• Laravel
• Vue

---

Installing Tailwind CSS

Install Tailwind in your project.

npm install tailwindcss @tailwindcss/vite

Import Tailwind.

@import "tailwindcss";

After setup, utility classes become available throughout your project.

---

Utility Classes

Tailwind provides small utility classes.

Instead of writing:

color: white;

Use:

text-white

Instead of:

background: blue;

Use:

bg-blue-500

---

Spacing

CSS

padding: 16px;

margin: 20px;

Tailwind

p-4

m-5

Directional spacing:

pt-4

pb-4

pl-4

pr-4

px-4

py-4

---

Colors

CSS

color: white;

background: black;

Tailwind

text-white

bg-black

Examples

bg-red-500

bg-green-500

bg-blue-500

text-gray-700

---

Typography

CSS

font-size: 24px;

font-weight: bold;

text-align: center;

Tailwind

text-2xl

font-bold

text-center

Common utilities:

text-sm

text-lg

text-xl

font-medium

font-semibold

font-bold

italic

underline

---

Width & Height

CSS

width: 100%;

height: 100vh;

Tailwind

w-full

h-screen

Examples

w-64

w-1/2

h-32

min-h-screen

---

Flexbox

CSS

display: flex;

justify-content: center;

align-items: center;

Tailwind

flex

justify-center

items-center

Example

<div class="flex items-center justify-between">

</div>

---

Grid

CSS

display: grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

Tailwind

grid

grid-cols-3

gap-5

Example

<div class="grid grid-cols-3 gap-5">

</div>

---

Borders & Shadows

CSS

border:1px solid gray;

border-radius:8px;

box-shadow;

Tailwind

border

rounded-lg

shadow-md

Examples

rounded

rounded-full

shadow

shadow-lg

---

Responsive Design

Tailwind uses responsive prefixes.

sm:

md:

lg:

xl:

2xl:

Example

<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

</div>

Meaning

• Mobile → 1 Column
• Tablet → 2 Columns
• Desktop → 4 Columns

---

State Variants

Hover

hover:bg-blue-600

Focus

focus:ring-2

Active

active:scale-95

Disabled

disabled:opacity-50

Example

<button
class="bg-blue-500 hover:bg-blue-600 text-white">

    Submit

</button>

---

Dark Mode

Tailwind supports dark mode.

dark:bg-gray-900

dark:text-white

Example

<div
class="bg-white dark:bg-gray-900 text-black dark:text-white">

</div>

---

Customization

Tailwind can be customized.

Common customizations:

• Colors
• Fonts
• Spacing
• Breakpoints
• Border Radius
• Shadows

These are configured in the project configuration file.

---

@apply Directive

Sometimes repeating utility classes isn't ideal.

Use @apply inside CSS.

.btn {

    @apply
    px-4
    py-2
    rounded-lg
    bg-blue-500
    text-white;

}

Now HTML becomes:

<button class="btn">

    Login

</button>

---

CSS vs Tailwind

CSS

.card {

    background: white;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 2px 10px gray;

}

Tailwind

<div
class="bg-white p-5 rounded-xl shadow-md">

</div>

Both create the same design.

---

Best Practices

• Learn CSS before Tailwind.
• Use utility classes instead of writing unnecessary CSS.
• Keep class names organized.
• Use responsive utilities.
• Avoid excessive @apply.
• Use reusable components for repeated UI.

---

Key Takeaway

Tailwind CSS is not a replacement for CSS—it is a faster way to write CSS.

Instead of writing:

padding: 16px;

background: blue;

color: white;

You write:

p-4

bg-blue-500

text-white

If you already understand CSS, learning Tailwind is mostly about learning its utility class names.

Think of it as:

CSS Knowledge
        +
Tailwind Utility Classes
        ↓
Faster Frontend Development