How to Use Tailwind CSS: The Beginner's Guide (v4 Setup, Responsive Design, and a Real Page)

CodexFuse Team · 2026-10-31T03:57:27.257Z · 14 min read

What is Tailwind CSS, and why do beginners love it?

Tailwind CSS is a utility-first CSS framework: instead of writing custom CSS rules in a separate stylesheet, you style elements directly in your HTML with small, single-purpose classes like p-4, bg-white, and rounded-lg. Learning how to use Tailwind CSS means learning to read a design as a stack of these tiny classes rather than as a pile of named selectors. Beginners love it because there is no naming to agonize over, no stylesheet to hunt through, and the feedback loop is instant — change a class, see the change.

The current major version is Tailwind CSS v4 (v4.3 as of September 2026), and it changed the setup story completely: configuration moved from a JavaScript file into plain CSS. If you have seen older tutorials that start with npx tailwindcss init and a tailwind.config.js file, those teach the v3 way — this guide teaches the v4 CSS-first way, which is what the official docs at tailwindcss.com now describe.

Here is the idea in one glance. The traditional approach hides the styling in a separate file:

/* In a separate CSS file */
.card {
  padding: 16px;
  background-color: white;
  border-radius: 8px;
}

The Tailwind approach puts it where you can see it:

<div class="p-4 bg-white rounded-lg shadow-md">
  Card content
</div>

Behind the scenes, Tailwind scans your HTML and component files, finds the class names you actually used, and generates a static CSS file containing only those styles — nothing unused ships to the browser. That keeps the output small by construction, and when you want to squeeze a hand-built stylesheet even further, a free code minifier does the same kind of trimming on demand.

What do you need before using Tailwind CSS?

You need three things: Node.js installed on your machine, a project to style, and a text editor. The official v4 install paths assume Node.js 20 or newer (the v4 upgrade tool itself requires Node.js 20+, per the official upgrade guide). Any editor works, but most beginners pair Tailwind with VS Code plus the free Tailwind CSS IntelliSense extension, which autocompletes class names as you type — our VS Code beginner guide walks through that setup if you have not configured an editor yet.

You also need to decide how Tailwind plugs into your build. The docs offer four routes: the Vite plugin (recommended), the PostCSS plugin, the standalone CLI, and the Play CDN. This guide teaches the Vite path first because it is the one the official installation docs recommend, then shows the others so you can pick what fits your project.

How do you install Tailwind CSS v4 with Vite?

You install Tailwind CSS v4 with Vite in five steps: scaffold the project, install the packages, register the Vite plugin, import Tailwind in your CSS, and start the dev server. Here is each step exactly as the official installation docs describe it.

1. Create your project. If you do not have one yet, scaffold a Vite project:

   npm create vite@latest my-project
   cd my-project

2. Install Tailwind CSS. Install tailwindcss and the Vite plugin together:

   npm install tailwindcss @tailwindcss/vite

3. Register the Vite plugin. In vite.config.ts (or .js), add the plugin:

   import { defineConfig } from 'vite'
   import tailwindcss from '@tailwindcss/vite'
   
   export default defineConfig({
     plugins: [tailwindcss()],
   })

4. Import Tailwind in your CSS. In your main CSS file (for example src/style.css), add one line:

   @import "tailwindcss";

   Make sure that CSS file is linked from your HTML or imported by your app entry point.
5. Start building. Run npm run dev, then use utility classes in your markup:

   <h1 class="text-3xl font-bold underline">
     Hello world!
   </h1>

That is the whole setup. Tailwind v4 scans your templates for class names on its own and generates only the utilities you use — there is no config file to point at your content paths, because v4 detects sources automatically.

What are the other install routes?

PostCSS: install tailwindcss and @tailwindcss/postcss, then register the plugin in postcss.config.mjs as '@tailwindcss/postcss': {}. Your CSS still starts with @import "tailwindcss";. One v4 bonus: imports and vendor prefixing are now handled for you, so you can drop postcss-import and autoprefixer if your project had them.

Standalone CLI: for a plain folder with no bundler, install tailwindcss and @tailwindcss/cli, then compile with npx @tailwindcss/cli -i ./src/style.css -o ./static/dist/tailwind.css --watch. The --watch flag rebuilds whenever your files change.

Play CDN: a single script tag you drop into a page to try Tailwind instantly. It is a playground tool, not a production setup — it cannot tree-shake or optimize the way a real build does, so switch to one of the three build routes before you ship.

How do utility classes actually work?

Utility classes work as a fixed vocabulary: each class does exactly one CSS job, and you compose designs by stacking them. flex sets display flex, items-center centers on the cross axis, gap-4 spaces children, px-6 py-3 pads the button, bg-indigo-600 colors it, hover:bg-indigo-700 darkens it on hover. Reading a class list left to right tells you what the element looks like without opening another file.

Spacing is the fastest way to feel the system. Every spacing utility is a multiple of the --spacing theme variable, which defaults to 0.25rem (4px). So p-4 is 1rem of padding, mt-8 is 2rem of top margin, and gap-6 is 1.5rem between flex or grid children. In v4 the scale is dynamic — any number works with no configuration, so w-17, pr-29, or m-21 (5.25rem) all generate on demand. The same open-endedness applies to grids: grid-cols-15 gives you fifteen equal columns without touching a config file.

A few more building blocks you will use constantly:

• Layout: flex, grid, block, hidden — plus gap-* on the parent instead of margins on children.
• Sizing: w-full, max-w-2xl, h-screen, min-h-dvh for full-viewport sections.
• Typography: text-lg, font-semibold, tracking-wide, leading-relaxed, text-center.
• State variants: prefix any utility with hover:, focus:, or disabled: to style its state, like hover:bg-indigo-700 transition-colors.

One thing to know: Tailwind ships a small reset called Preflight that normalizes browser defaults (margins, heading sizes, and the like). Your unstyled HTML will look a little different the moment Tailwind loads — that is intentional, and it is the baseline your utilities build on.

How do you make a layout responsive with Tailwind?

You make a layout responsive by prefixing utilities with breakpoint names: md:flex means "become flex at the medium breakpoint and above." Tailwind is mobile-first, so unprefixed utilities apply at every screen size and prefixed ones layer changes on top as the viewport grows. The practical rule the docs teach: write the mobile layout first with plain utilities, then add sm:, md:, and lg: overrides where the design needs to change.

There are five breakpoints by default:

A classic beginner trap is writing sm:text-center expecting it to center text on phones — it does the opposite, centering only at 640px and wider. To center on mobile and left-align on larger screens, write text-center sm:text-left: the unprefixed version targets mobile, the prefixed one overrides it upward.

Every utility accepts these prefixes, so a card grid is one line: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 stacks on phones, shows two columns on small screens, and four on laptops. For ranges, Tailwind generates max-* variants too (md:max-lg:flex applies only between the md and lg breakpoints), and for one-off sizes you can write arbitrary breakpoints like min-[320px]:text-center without touching your theme.

How do you add your own colors and fonts in Tailwind v4?

You add your own colors and fonts in v4 with the @theme directive in your CSS — no JavaScript config file exists anymore. Theme variables are special CSS variables in namespaces like --color-* and --font-*, and defining one automatically creates the matching utility classes. Add a brand color like this:

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.72 0.11 178);
  --color-brand-700: oklch(0.52 0.12 178);
  --font-display: "Sora", sans-serif;
}

Now bg-brand-500, text-brand-700, and font-display exist in your HTML, exactly like the built-in bg-red-500 or font-sans. You can also override defaults by redefining a variable — --breakpoint-sm: 30rem moves the sm: variant to 30rem — and every theme variable is emitted as a real CSS variable too, so var(--color-brand-500) works in your custom CSS and inline styles.

When you pick colors, pair them deliberately: light text on a brand-colored button needs enough contrast to stay readable, and a free color contrast checker gives you the WCAG ratio in one number before you commit to a palette. Keep your palette small — two brand colors plus the built-in neutrals (gray, zinc, slate) cover almost every beginner page.

Can you build a complete page with Tailwind CSS?

Yes — here is a complete hero section built only from utilities, using a brand color defined with @theme. It stacks on mobile and goes side-by-side on medium screens and up:

<section class="bg-white">
  <div class="mx-auto max-w-5xl px-6 py-16 md:py-24">
    <div class="grid gap-10 md:grid-cols-2 md:items-center">
      <div>
        <p class="text-sm font-semibold uppercase tracking-wide text-brand-700">
          New this week
        </p>
        <h1 class="mt-3 font-display text-4xl font-bold text-gray-950 md:text-5xl">
          Ship your first styled page today
        </h1>
        <p class="mt-4 text-lg text-gray-600">
          Utility classes turn design decisions into readable HTML —
          no separate stylesheet to maintain.
        </p>
        <div class="mt-8 flex flex-col gap-3 sm:flex-row">
          <a href="#" class="rounded-lg bg-brand-500 px-6 py-3 text-center font-semibold text-white hover:bg-brand-700 transition-colors">
            Get started
          </a>
          <a href="#" class="rounded-lg border border-gray-300 px-6 py-3 text-center font-semibold text-gray-700 hover:bg-gray-50">
            See examples
          </a>
        </div>
      </div>
      <div class="rounded-2xl bg-gray-100 p-8 shadow-md">
        <p class="font-mono text-sm text-gray-700">Your product screenshot or demo goes here.</p>
      </div>
    </div>
  </div>
</section>

Notice the pattern: max-w-5xl mx-auto px-6 centers and caps the content width, md:grid-cols-2 splits the layout on tablets and up, and flex-col sm:flex-row stacks the buttons on phones but places them side by side from 640px. Copy this into your Vite project, run npm run dev, and you have a real responsive page — no custom CSS written.

What changed between Tailwind CSS v3 and v4?

The v3-to-v4 upgrade moved configuration from JavaScript into CSS and renamed a batch of utilities. The official upgrade guide ships an automated tool — npx @tailwindcss/upgrade (needs Node.js 20+) — that handles most of the migration, but you should still know what it changes:

Two behavioral changes catch upgraders most: borders and dividers now default to currentColor instead of gray-200 (always name a color, like border-gray-200), and v4 targets modern browsers only — Safari 16.4+, Chrome 111+, Firefox 128+. If you must support older browsers, stay on v3.4 for now.

Tailwind CSS vs Bootstrap: which should a beginner learn first?

Learn Tailwind first if you want to design freely; learn Bootstrap first if you want pre-built components fast. The difference is philosophical: Bootstrap ships ready-made components (a navbar, a card, a modal) that you assemble and theme, while Tailwind ships no components at all — just utilities you combine into any design. Bootstrap gets a decent-looking admin panel on screen in an afternoon; Tailwind gets you a design that does not look like Bootstrap.

For a beginner's career, Tailwind's approach teaches more transferable CSS: because every class maps to one property, you absorb the box model, flexbox, and spacing as you build. Bootstrap teaches its own component API, which is productive but less portable. Many developers end up knowing both — Bootstrap for quick internal tools, Tailwind for everything customer-facing.

What mistakes do Tailwind beginners make most?

Building class names dynamically. Tailwind scans your files as plain text, so bg-${color}-600 never matches anything — the full class name must appear literally in your code. Map props to complete class names instead ({ blue: "bg-blue-600", red: "bg-red-600" }), exactly as the official source-detection docs warn.

Following v3 tutorials. Any guide that tells you to create tailwind.config.js or write @tailwind base is teaching the old version. In v4 there is no config file and the import is @import "tailwindcss"; — check the date on every tutorial before you trust its setup steps.

Forgetting the viewport meta tag. Responsive prefixes do nothing useful on phones without <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head>. The page renders at desktop width and your md: classes never trigger.

Assuming borders have a color. In v4, border alone draws in currentColor — on dark text that can look almost black. Always pair it with a color: border border-gray-200.

Using space-x-* on wrapping layouts. The space utilities add margins to children, which break when items wrap or reorder. Prefer gap-* on flex and grid parents — it is the modern, robust choice.

How do you deploy a Tailwind CSS site?

You deploy it like any static site: run the production build (npm run build with Vite), which compiles your HTML, JavaScript, and the generated Tailwind CSS into a dist folder, then upload that folder to a host. Because Tailwind already strips unused styles, the CSS bundle is tiny — often just a few kilobytes — so even a basic shared host loads it fast. If you outgrow shared hosting, our what is VPS hosting guide explains the next step up, and committing your project with our GitHub beginner guide keeps every version of your styles safe as you iterate.

Sources

• Tailwind CSS official installation docs (tailwindcss.com/docs/installation, fetched 2026-10-30): Vite plugin setup, @import "tailwindcss", PostCSS and CLI routes, automatic class scanning.
• Tailwind CSS official upgrade guide (tailwindcss.com/docs/upgrade-guide, fetched 2026-10-30): npx @tailwindcss/upgrade, Node.js 20+ requirement, Safari 16.4+/Chrome 111+/Firefox 128+ targets, all v3→v4 breaking changes and renamed utilities.
• Tailwind CSS theme variable docs (tailwindcss.com/docs/theme, fetched 2026-10-30): @theme directive, namespaces, oklch color tokens, overriding defaults, --*: initial reset.
• Tailwind CSS responsive design docs (tailwindcss.com/docs/responsive-design, fetched 2026-10-30): five default breakpoints, mobile-first system, max-* variants, container queries.
• Tailwind CSS source-detection docs (tailwindcss.com/docs/detecting-classes-in-source-files, fetched 2026-10-30): automatic scanning, @source registration, never construct class names dynamically.
• Flavio Copes, "How to setup Tailwind CSS" (flaviocopes.com/tailwind-setup/, updated September 17, 2026): Tailwind 4.3 setup with Vite, PostCSS, and CLI; automatic content scanning replaces PurgeCSS.
• Web Coding Center, "Spacing and Sizing Utilities – Tailwind CSS" (webcodingcenter.com, fetched 2026-10-30): dynamic spacing scale — any value like w-17 or pr-29 works in v4 with no configuration.
• Quackit, "Tailwind CSS Grid Layout" (quackit.com, fetched 2026-10-30): grid-cols-<n> open-ended numeric scale in v4.

Frequently asked questions

Is Tailwind CSS free to use?

Yes. Tailwind CSS is free and open-source for personal and commercial projects. The paid product is Tailwind UI, a separate library of pre-built components — the framework itself, including v4, costs nothing.

Do I need to know CSS before learning Tailwind?

Basic CSS helps a lot — Tailwind classes are shorthand for CSS properties, so knowing what padding, margin, flexbox, and the box model do makes the class names click. You can learn both in parallel, but do not skip CSS fundamentals entirely or the utilities will feel like magic spells.

Why is my Tailwind class not working?

Check four things in order: the class name is spelled exactly right and appears literally in your source (no string interpolation), your CSS file contains @import "tailwindcss";, the CSS file is actually linked or imported by your app, and you restarted the dev server after changing the build config. Nine times out of ten, one of these is the cause.

Does Tailwind CSS work with React, Vue, and Svelte?

Yes. Tailwind scans any template files as plain text, so it works with React (JSX), Vue, Svelte, SvelteKit, Nuxt, Astro, and plain HTML alike. The official docs include framework-specific guides — for Vite-based setups the same five-step install in this guide applies.

Should I still learn Bootstrap in 2026?

It is useful but no longer the default first choice. Bootstrap remains common in legacy codebases and admin dashboards, so recognizing its classes is a practical skill. For new projects and new learners, Tailwind's utility-first approach is where the ecosystem's momentum is.