Learn Tailwind CSS 4 from Scratch to Modern Responsive Websites
Principiante

Learn Tailwind CSS 4 from Scratch to Modern Responsive Websites

A complete beginner-friendly roadmap to learn Tailwind CSS 4, master modern utility-first styling, and build beautiful responsive websites using only HTML and Tailwind.

Jose Henriquez16 de marzo de 2026

What Tailwind CSS 4, is a

Utility-first CSS framework. That means you build designs by composing utility classes directly in your HTML instead of writing a lot of custom CSS for every component. The official docs describe it exactly that way: styling by combining small, single-purpose utility classes directly in markup. (tailwindcss.com)

If your goal is to create:

  • beautiful landing pages,
  • clean portfolios,
  • elegant blog layouts,
  • responsive product pages,
  • and modern UI sections,

then Tailwind is one of the cleanest tools to learn for that.

What you will learn by the end

By the end of this roadmap, you should be able to:

  • install Tailwind CSS 4 correctly with Vite,
  • understand how utility classes work,
  • build spacing, layout, color, typography, and component systems,
  • create responsive sections with mobile-first design,
  • work with dark mode,
  • customize your design tokens using @theme,
  • and build a full responsive website using only HTML + Tailwind. ()

Part 1 — Installation with Vite

Tailwind’s official docs say the Vite plugin is the most seamless way to install Tailwind in modern projects. (tailwindcss.com)

Step 1: Create the project

bash
npm create vite@latest tailwind4-html-site
cd tailwind4-html-site
npm install

This is the official starting point for the Vite-based install flow. (tailwindcss.com)

For this roadmap, choose:

  • Vanilla
  • JavaScript

so the project stays simple and HTML-focused.

Step 2: Install Tailwind CSS 4

bash
npm install tailwindcss @tailwindcss/vite

Those are the official packages for the Vite setup. (tailwindcss.com)

Step 3: Configure Vite

Edit vite.config.js:

js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

That is the official Vite plugin pattern from Tailwind’s docs. (tailwindcss.com)

Step 4: Import Tailwind in your CSS

Create src/style.css:

css
@import "tailwindcss";

In Tailwind v4, this is the standard entry point. The old @tailwind base;, @tailwind components;, and @tailwind utilities; approach is not the modern v4 path. (tailwindcss.com)

Step 5: Load the CSS

In main.js:

js
import "./style.css";

Step 6: Add your HTML

Replace index.html with:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS 4</title>
  </head>
  <body class="bg-slate-100 text-slate-900">
    <main class="mx-auto max-w-5xl px-6 py-16">
      <h1 class="text-4xl font-bold tracking-tight">Tailwind CSS 4 is working</h1>
      <p class="mt-4 text-lg text-slate-600">
        Your setup is ready. Time to build something that actually looks good.
      </p>
    </main>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Tailwind’s docs also emphasize the viewport meta tag as part of responsive setup. (tailwindcss.com)

Step 7: Run the project

bash
npm run dev

At this point, Tailwind is installed and ready. (tailwindcss.com)

Part 2 — Project structure for this roadmap

Use this simple structure:

txt
tailwind4-html-site/
├─ index.html
├─ package.json
├─ vite.config.js
├─ main.js
└─ src/
   └─ style.css

You do not need a complicated setup to learn Tailwind. Half the internet loves turning a spoon into a spaceship.

Part 3 — Tailwind CSS 4 fundamentals roadmap

Phase 1 — Learn the utility-first mindset

Tailwind wants you to style directly in HTML using small utility classes. That is the entire game. If you keep trying to treat it like traditional CSS-first component naming, you will fight the framework for no reason. (tailwindcss.com)

Learn:

  • what utility-first means
  • how class composition works
  • why consistency matters
  • why spacing and structure beat visual chaos

Practice:

Build these tiny pieces:

  • one centered card
  • one button
  • one badge
  • one text block
  • one callout section

Phase 2 — Learn spacing, sizing, and alignment

This is the backbone of all good UI.

Learn:

  • p-*, px-*, py-*
  • m-*, mt-*, mb-*
  • gap-*
  • w-*, h-*, max-w-*
  • mx-auto
  • flex, grid
  • items-*, justify-*

Practice:

Create:

  • a centered profile card
  • a 2-column features row
  • a stacked mobile section
  • a button row with equal spacing

Phase 3 — Learn typography and hierarchy

Most ugly pages are not broken by CSS. They are broken by bad text hierarchy.

Learn:

  • text-sm to text-6xl
  • font-medium, font-semibold, font-bold
  • leading-tight, leading-relaxed
  • tracking-tight
  • text-slate-*
  • max-w-prose style thinking through width control

Practice:

Build:

  • a hero heading
  • a subheading
  • a pricing card title
  • a section intro
  • an article preview block

Phase 4 — Learn colors, borders, shadows, and surfaces

This is where pages start looking modern instead of plain.

Learn:

  • bg-*
  • text-*
  • border
  • rounded-*
  • shadow-*
  • light surface vs dark surface
  • accent color usage
  • muted text

Practice:

Build:

  • a clean card
  • a dark card
  • a CTA block
  • a feature section with 3 colored icons or badges

Phase 5 — Learn responsive design properly

Tailwind’s docs state that every utility class can be applied conditionally at different breakpoints, which is the core of how responsive design works in Tailwind. (tailwindcss.com)

Learn:

  • mobile-first design
  • sm:, md:, lg:, xl:
  • stacking on mobile
  • splitting layouts on larger screens
  • scaling text and spacing by breakpoint

Example:

html
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-2xl bg-white p-6 shadow-sm">Card 1</div>
  <div class="rounded-2xl bg-white p-6 shadow-sm">Card 2</div>
  <div class="rounded-2xl bg-white p-6 shadow-sm">Card 3</div>
</div>

That mobile-first responsive pattern matches the official responsive design model. (tailwindcss.com)

Practice:

Build:

  • responsive hero
  • responsive features grid
  • responsive pricing cards
  • responsive footer columns

Phase 6 — Learn dark mode

Tailwind includes a built-in dark variant for dark mode styling. (tailwindcss.com)

Learn:

  • dark:bg-*
  • dark:text-*
  • dark:border-*
  • keeping contrast readable
  • designing soft dark surfaces instead of pure black everything

Practice:

Take one light card and make a dark version.

Example:

html
<div class="rounded-2xl border border-slate-200 bg-white p-6 text-slate-900 dark:border-slate-800 dark:bg-slate-900 dark:text-white">
  Modern card
</div>

Phase 7 — Learn theme customization in Tailwind 4

In Tailwind v4, theme customization is CSS-first using @theme. Tailwind’s docs describe theme variables as the place to store design tokens like colors, fonts, and breakpoints. (tailwindcss.com)

Update src/style.css:

css
@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.18 258);
  --color-brand-600: oklch(0.54 0.2 260);
  --font-display: "Inter", "sans-serif";
  --breakpoint-3xl: 120rem;
}

Now you can use classes like:

  • bg-brand-500
  • text-brand-600

This is one of the biggest v4 differences from older Tailwind tutorials. (tailwindcss.com)

Part 4 — Practice roadmap by projects

Practice 1 — Simple profile card

html
<section class="mx-auto max-w-sm px-6 py-16">
  <div class="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
    <div class="h-16 w-16 rounded-full bg-slate-200"></div>
    <h2 class="mt-4 text-2xl font-bold text-slate-900">Alex Carter</h2>
    <p class="mt-2 text-sm text-slate-500">Frontend Developer</p>
    <p class="mt-4 text-slate-600">
      Building clean and modern interfaces with performance in mind.
    </p>
    <a
      href="#"
      class="mt-6 inline-flex rounded-xl bg-slate-900 px-4 py-3 text-sm font-semibold text-white hover:bg-slate-800"
    >
      View Profile
    </a>
  </div>
</section>

What you learn:

  • spacing
  • border radius
  • typography
  • shadow
  • button styling

Practice 2 — Responsive feature cards

html
<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="max-w-2xl">
    <p class="text-sm font-semibold text-indigo-600">Features</p>
    <h2 class="mt-2 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">
      Build modern websites faster
    </h2>
    <p class="mt-4 text-lg text-slate-600">
      Tailwind helps you move from idea to polished UI without wrestling your CSS for hours.
    </p>
  </div>

  <div class="mt-10 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
    <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
      <h3 class="text-lg font-semibold text-slate-900">Responsive by default</h3>
      <p class="mt-3 text-slate-600">Design mobile-first and scale up cleanly.</p>
    </article>
    <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
      <h3 class="text-lg font-semibold text-slate-900">Fast to iterate</h3>
      <p class="mt-3 text-slate-600">Build layouts directly in your markup.</p>
    </article>
    <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
      <h3 class="text-lg font-semibold text-slate-900">Consistent design</h3>
      <p class="mt-3 text-slate-600">Spacing and scale stay under control.</p>
    </article>
  </div>
</section>

What you learn:

  • grids
  • responsive columns
  • section hierarchy
  • clean card systems

Practice 3 — Pricing section

html
<section class="bg-slate-950 px-6 py-20 text-white">
  <div class="mx-auto max-w-6xl">
    <div class="text-center">
      <p class="text-sm font-semibold text-indigo-400">Pricing</p>
      <h2 class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
        Simple plans for modern projects
      </h2>
      <p class="mt-4 text-lg text-slate-300">
        Clean pricing cards are one of the best ways to practice hierarchy and spacing.
      </p>
    </div>

    <div class="mt-12 grid gap-6 md:grid-cols-3">
      <div class="rounded-3xl border border-slate-800 bg-slate-900 p-8">
        <h3 class="text-xl font-semibold">Starter</h3>
        <p class="mt-4 text-4xl font-bold">$0</p>
        <p class="mt-3 text-slate-400">Perfect for learning and small experiments.</p>
      </div>

      <div class="rounded-3xl border border-indigo-500 bg-slate-900 p-8 shadow-lg shadow-indigo-500/10">
        <h3 class="text-xl font-semibold">Pro</h3>
        <p class="mt-4 text-4xl font-bold">$19</p>
        <p class="mt-3 text-slate-400">For creators building polished public websites.</p>
      </div>

      <div class="rounded-3xl border border-slate-800 bg-slate-900 p-8">
        <h3 class="text-xl font-semibold">Team</h3>
        <p class="mt-4 text-4xl font-bold">$49</p>
        <p class="mt-3 text-slate-400">For teams who want consistency at scale.</p>
      </div>
    </div>
  </div>
</section>

What you learn:

  • dark surfaces
  • visual emphasis
  • card comparison layouts
  • section contrast

Part 5 — Final project: full responsive landing page with only HTML + Tailwind 4

This is your real milestone project.

Goal

Build a modern responsive landing page with:

  • navbar
  • hero
  • features
  • stats
  • testimonials
  • pricing
  • CTA
  • footer

Full example

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modern Tailwind 4 Landing Page</title>
  </head>
  <body class="bg-white text-slate-900">
    <header class="border-b border-slate-200">
      <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8">
        <a href="#" class="text-xl font-bold tracking-tight">NovaUI</a>
        <nav class="hidden gap-8 md:flex">
          <a href="#features" class="text-sm font-medium text-slate-600 hover:text-slate-900">Features</a>
          <a href="#pricing" class="text-sm font-medium text-slate-600 hover:text-slate-900">Pricing</a>
          <a href="#testimonials" class="text-sm font-medium text-slate-600 hover:text-slate-900">Testimonials</a>
        </nav>
        <a href="#" class="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800">
          Get Started
        </a>
      </div>
    </header>

    <section class="relative overflow-hidden">
      <div class="mx-auto grid max-w-7xl items-center gap-12 px-6 py-20 lg:grid-cols-2 lg:px-8 lg:py-28">
        <div>
          <span class="inline-flex rounded-full border border-slate-200 px-3 py-1 text-sm font-medium text-slate-600">
            Tailwind CSS 4 + HTML
          </span>
          <h1 class="mt-6 max-w-2xl text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl">
            Build beautiful responsive websites with clean utility-first styling
          </h1>
          <p class="mt-6 max-w-xl text-lg leading-8 text-slate-600">
            Learn Tailwind CSS 4 from scratch and create elegant landing pages, polished sections, and modern responsive layouts.
          </p>
          <div class="mt-8 flex flex-col gap-4 sm:flex-row">
            <a href="#" class="inline-flex items-center justify-center rounded-xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white hover:bg-slate-800">
              Start Learning
            </a>
            <a href="#features" class="inline-flex items-center justify-center rounded-xl border border-slate-300 px-5 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50">
              Explore Sections
            </a>
          </div>
        </div>

        <div class="rounded-3xl border border-slate-200 bg-slate-50 p-6 shadow-sm sm:p-8">
          <div class="grid gap-4">
            <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
              <p class="text-sm font-medium text-slate-500">Performance</p>
              <p class="mt-2 text-2xl font-bold text-slate-900">Fast, clean UI foundations</p>
            </div>
            <div class="grid gap-4 sm:grid-cols-2">
              <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                <p class="text-sm font-medium text-slate-500">Responsive</p>
                <p class="mt-2 text-lg font-semibold text-slate-900">Mobile first</p>
              </div>
              <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                <p class="text-sm font-medium text-slate-500">Design</p>
                <p class="mt-2 text-lg font-semibold text-slate-900">Modern layouts</p>
              </div>
            </div>
            <div class="rounded-2xl bg-slate-900 p-6 text-white">
              <p class="text-sm font-medium text-slate-300">Goal</p>
              <p class="mt-2 text-xl font-semibold">Pages that actually look premium</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="features" class="px-6 py-20 lg:px-8">
      <div class="mx-auto max-w-7xl">
        <div class="max-w-2xl">
          <p class="text-sm font-semibold text-indigo-600">Features</p>
          <h2 class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
            A workflow that feels structured, not chaotic
          </h2>
          <p class="mt-4 text-lg text-slate-600">
            Tailwind helps you move faster while keeping spacing, hierarchy, and responsiveness under control.
          </p>
        </div>

        <div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
            <h3 class="text-lg font-semibold">Utility-first styling</h3>
            <p class="mt-3 text-slate-600">Compose directly in HTML without a swamp of custom CSS.</p>
          </article>
          <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
            <h3 class="text-lg font-semibold">Responsive design</h3>
            <p class="mt-3 text-slate-600">Use breakpoint variants to adapt layouts cleanly.</p>
          </article>
          <article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
            <h3 class="text-lg font-semibold">Modern theming</h3>
            <p class="mt-3 text-slate-600">Use design tokens in Tailwind 4 with CSS-first theming.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="bg-slate-50 px-6 py-20 lg:px-8">
      <div class="mx-auto grid max-w-7xl gap-6 md:grid-cols-3">
        <div class="rounded-3xl bg-white p-8 shadow-sm">
          <p class="text-sm text-slate-500">Projects built</p>
          <p class="mt-3 text-4xl font-bold">24K+</p>
        </div>
        <div class="rounded-3xl bg-white p-8 shadow-sm">
          <p class="text-sm text-slate-500">Average load impact</p>
          <p class="mt-3 text-4xl font-bold">Low</p>
        </div>
        <div class="rounded-3xl bg-white p-8 shadow-sm">
          <p class="text-sm text-slate-500">Developer happiness</p>
          <p class="mt-3 text-4xl font-bold">Very real</p>
        </div>
      </div>
    </section>

    <section id="testimonials" class="px-6 py-20 lg:px-8">
      <div class="mx-auto max-w-7xl">
        <div class="text-center">
          <p class="text-sm font-semibold text-indigo-600">Testimonials</p>
          <h2 class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
            Teams love clean interfaces
          </h2>
        </div>

        <div class="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          <blockquote class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-slate-600">“Tailwind made our marketing pages faster to build and easier to keep consistent.”</p>
            <footer class="mt-4 text-sm font-semibold text-slate-900">— Product Team</footer>
          </blockquote>
          <blockquote class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-slate-600">“The responsive workflow is ridiculously practical once you stop overthinking it.”</p>
            <footer class="mt-4 text-sm font-semibold text-slate-900">— UI Engineer</footer>
          </blockquote>
          <blockquote class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-slate-600">“We replaced a pile of inconsistent CSS with a cleaner system.”</p>
            <footer class="mt-4 text-sm font-semibold text-slate-900">— Frontend Lead</footer>
          </blockquote>
        </div>
      </div>
    </section>

    <section id="pricing" class="bg-slate-950 px-6 py-20 text-white lg:px-8">
      <div class="mx-auto max-w-7xl">
        <div class="text-center">
          <p class="text-sm font-semibold text-indigo-400">Pricing</p>
          <h2 class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">
            Pick the plan that fits your pace
          </h2>
          <p class="mt-4 text-lg text-slate-300">
            A strong pricing section teaches hierarchy, contrast, and responsive card design.
          </p>
        </div>

        <div class="mt-12 grid gap-6 md:grid-cols-3">
          <div class="rounded-3xl border border-slate-800 bg-slate-900 p-8">
            <h3 class="text-xl font-semibold">Starter</h3>
            <p class="mt-4 text-4xl font-bold">$0</p>
            <p class="mt-3 text-slate-400">Perfect for learning and small projects.</p>
          </div>
          <div class="rounded-3xl border border-indigo-500 bg-slate-900 p-8 shadow-lg shadow-indigo-500/10">
            <h3 class="text-xl font-semibold">Pro</h3>
            <p class="mt-4 text-4xl font-bold">$19</p>
            <p class="mt-3 text-slate-400">For polished sites with serious visual structure.</p>
          </div>
          <div class="rounded-3xl border border-slate-800 bg-slate-900 p-8">
            <h3 class="text-xl font-semibold">Team</h3>
            <p class="mt-4 text-4xl font-bold">$49</p>
            <p class="mt-3 text-slate-400">For teams building modern product websites.</p>
          </div>
        </div>
      </div>
    </section>

    <section class="px-6 py-20 lg:px-8">
      <div class="mx-auto max-w-5xl rounded-3xl bg-indigo-600 px-8 py-14 text-center text-white">
        <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
          Start building cleaner interfaces today
        </h2>
        <p class="mx-auto mt-4 max-w-2xl text-lg text-indigo-100">
          Learn Tailwind CSS 4 step by step and turn raw HTML into modern, responsive design.
        </p>
        <a href="#" class="mt-8 inline-flex rounded-xl bg-white px-5 py-3 text-sm font-semibold text-indigo-700 hover:bg-indigo-50">
          Start Now
        </a>
      </div>
    </section>

    <footer class="border-t border-slate-200 px-6 py-10 lg:px-8">
      <div class="mx-auto flex max-w-7xl flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <p class="text-sm text-slate-500">© 2026 NovaUI. Built with Tailwind CSS 4.</p>
        <div class="flex gap-6 text-sm text-slate-500">
          <a href="#" class="hover:text-slate-900">Privacy</a>
          <a href="#" class="hover:text-slate-900">Terms</a>
          <a href="#" class="hover:text-slate-900">Contact</a>
        </div>
      </div>
    </footer>

    <script type="module" src="/main.js"></script>
  </body>
</html>

Part 6 — What this final project teaches

This single page gives you practice in:

  • layout composition
  • responsive grid systems
  • typography hierarchy
  • contrast
  • cards
  • CTA design
  • dark section styling
  • header and footer structure
  • section spacing
  • modern landing page rhythm

That is already enough to build real websites, not just toy snippets.

Part 7 — Suggested learning schedule

Week 1

Install Tailwind with Vite and learn utility-first basics: spacing, color, typography, radius, shadow. Tailwind’s v4 install with Vite and CSS import is the recommended modern path. (tailwindcss.com)

Week 2

Practice layout with flex, grid, width, alignment, and containers.

Week 3

Focus on responsive design using breakpoint variants like md: and lg:. Tailwind’s responsive docs define this as a core concept. (tailwindcss.com)

Week 4

Work on hierarchy: hero sections, cards, feature grids, and pricing layouts.

Week 5

Learn dark mode and design tokens with @theme. Both are first-class concepts in the official docs. (tailwindcss.com)

Week 6

Build the full landing page and then rebuild it from memory with your own brand style.

That last part matters. Copy once, then rebuild. That is where the hands actually learn.

Part 8 — Common mistakes to avoid

  • Learning from v3 tutorials and copying outdated config
  • Using random spacing values with no rhythm
  • Overloading pages with too many shadows and colors
  • Designing desktop first and then trying to squeeze it into mobile
  • Writing class soup without section structure
  • Making everything “fancy” instead of making it readable

Tailwind does not make bad design decisions for you. It just lets you make them faster if you are reckless. Beautifully efficient chaos.

Part 9 — Official concepts you should study next

After this roadmap, the most important official Tailwind pages to review are:

  • installation with Vite, ()
  • responsive design, ()
  • theme variables, ()
  • utility-first styling, ()
  • dark mode, ()
  • and the v4 release notes / upgrade guide so you do not inherit old setup habits. ()

Final take

The best order to learn Tailwind CSS 4 is:

installation → utilities → spacing → layout → typography → colors → responsive design → components → theming → full page composition

That order works because good design is not random. First structure. Then rhythm. Then clarity. Then polish.