Tailwind CSS 4.0 — Complete Beginner-Friendly Tutorial 🚀🎨

Introduction

Tailwind CSS 4.0 is a huge evolution of Tailwind — cleaner, faster, and more modern. The new version removes older configs, simplifies setup, and introduces the powerful“content-aware engine” that scans your project automatically. ⚡ This tutorial will walk you through everything you need to know!

>>“Tailwind 4 makes CSS feel effortless — write classes, and everything just works.” 💡

Key Highlights of Tailwind 4 ✨

  • No config file required (but optional) 🔧
  • No PostCSS setup required ⚡
  • New @import "tailwindcss" syntax 🆕
  • Faster builds with the new engine 🚀
  • Automatic class detection — no “content” array 🎯
  • Better theme extensions & CSS nesting support 🌈

Installation & Setup 🧠

1. Install Tailwind 4

Tailwind 4 works with ANY framework — React, Vite, Next.js, Vue, Laravel, or plain HTML.

Install Tailwind

npm install tailwindcss

Note

No need for PostCSS or Autoprefixer — Tailwind 4 bundles everything internally! 🎉

2. Add Tailwind to Your CSS File

Create styles.css (or any CSS file) and add:

styles.css

@import "tailwindcss";

3. Import Your CSS File

This depends on your project type.

Example for Vite / React:

main.jsx

import './styles.css'
Example for HTML:
<link rel="stylesheet" href="styles.css" />

Using Tailwind 4 Classes 🎨

Tailwind 4 uses the same class-based styling you're already familiar with.

Example Component

export default function App() {
  return (
    <div className="bg-blue-600 text-white p-10 text-center text-3xl font-bold rounded-2xl">
      Tailwind 4 is AMAZING! 🎉
    </div>
  );
}

New Changes in Tailwind 4 (Important!) 📌

1. New Import Syntax

Old version used:

Old Tailwind

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

Tailwind 4 uses:

New Tailwind 4

@import "tailwindcss";

2. No config file needed

The default theme works instantly. But if you want to customize, create:

Create config

npx tailwindcss init

Your tailwind.config.js may look like:

tailwind.config.js

export default {
  theme: {
    extend: {
      colors: {
        brand: "#6366f1",
      },
    },
  },
};

3. CSS Nesting Built-In

CSS Nesting Example

.btn {
  @apply px-4 py-2 bg-black text-white;

  &:hover {
    @apply bg-gray-800;
  }
}

Tailwind 4 Folder Structure (Example) 📁

FileDescription
styles.cssMain file importing Tailwind
tailwind.config.js(Optional) Custom theme setup
index.html / App.jsxWhere you use Tailwind classes

Testing Tailwind 4 🎯

Try adding this HTML:

HTML Test

<div class="p-8 bg-emerald-500 text-white text-2xl rounded-xl shadow-lg">
  Tailwind 4 is working! 🌟
</div>

Useful Links 🔗

Note

Want tutorials for Vite, Next.js, PostCSS, Layouts, Components, or Animations? Just ask! 😊🔥