Master Tailwind CSS: The Complete Handbook for Modern Web Design

Tailwind CSS is a utility-first CSS framework: instead of writing a stylesheet full of custom class names, you style elements with small, single-purpose classes such as p-4, text-lg and bg-blue-600. Tailwind CSS v4 changed how it is installed and configured, so many older tutorials no longer work. This handbook covers the current way to use it in 2026, from setup to production.

1. What utility-first means

In traditional CSS you invent a class name, then write its rules elsewhere:

.card { padding: 1.5rem; border-radius: 0.75rem; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / 0.1); }

With Tailwind you apply the same styles directly in your markup:

<div class="p-6 rounded-xl bg-white shadow-sm">…</div>

This looks busy at first, but it has practical advantages: you don't switch files or invent names, every value comes from a shared scale so designs stay consistent, and deleting markup deletes its styles. The trade-off is long class lists, which you manage by building reusable components in your framework or templates.

For a wider comparison with design tokens and CSS architecture methods, see Modern CSS: Tailwind v4, Open Props and CUBE CSS.

2. Installing Tailwind CSS v4

Pick the method that matches your project. All of them need Node.js on your own computer (a current LTS release), not on your server.

With Vite (React, Vue, Svelte, plain HTML)

npm install tailwindcss @tailwindcss/vite

Add the plugin to vite.config.js:

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

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

Then put one line at the top of your main CSS file:

@import "tailwindcss";

With PostCSS (Next.js and other PostCSS set-ups)

Install tailwindcss and @tailwindcss/postcss, then register the plugin in postcss.config.mjs:

export default { plugins: { '@tailwindcss/postcss': {} } };

Next.js's create-next-app offers to set this up for you, and new Laravel projects ship with Tailwind configured through Vite.

With the standalone CLI (no bundler)

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

Link dist/output.css from your HTML. Add --minify and drop --watch for a production build.

3. Configuring your design in CSS

In v4, configuration lives in your CSS file. The @theme block defines design tokens, and each token generates matching utilities:

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.19 255);
  --color-brand-700: oklch(0.48 0.17 255);
  --font-display: "Poppins", sans-serif;
  --breakpoint-3xl: 120rem;
}

That gives you bg-brand-500, text-brand-700, font-display and a 3xl: breakpoint prefix. Tokens are also available as normal CSS variables, for example var(--color-brand-500).

Other directives you will use:

• @plugin "@tailwindcss/typography"; loads a plugin (install it with npm first).
• @utility defines your own utility class.
• @custom-variant defines your own variant, such as a class-based dark mode (section 6).
• @source "../node_modules/my-ui"; adds a folder that automatic class detection would otherwise skip.
• @config "./tailwind.config.js"; keeps an old JavaScript config working while you migrate.

Tailwind scans your project for class names automatically, ignoring files in .gitignore, so the v3 content array and the even older purge option are no longer needed.

4. Core utilities you'll use every day

When a value isn't on the scale, use square brackets for a one-off: top-[117px] or bg-[#1da1f2]. If you use the same value more than twice, add it to @theme instead.

5. Responsive design and states

Tailwind is mobile-first. Unprefixed classes apply to every screen size; a prefix applies from that breakpoint upwards:

So grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gives one column on phones, two on tablets and three on laptops.

State variants work the same way: hover:, focus-visible:, active:, disabled:. Use group on a parent and group-hover: on a child to style children when the parent is hovered. Container queries are built in: mark a parent with @container and use @md: on children to respond to the parent's width instead of the screen's.

A responsive navigation bar that stacks on phones:

<nav class="flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between">
  <a href="#top" class="text-xl font-bold text-brand-700">YourBrand</a>
  <ul class="flex flex-col gap-2 md:flex-row md:gap-6">
    <li><a class="hover:text-brand-500 focus-visible:underline" href="#services">Services</a></li>
    <li><a class="hover:text-brand-500 focus-visible:underline" href="#contact">Contact</a></li>
  </ul>
</nav>

6. Dark mode

By default, the dark: prefix follows the visitor's operating-system setting (prefers-color-scheme):

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">…</div>

To let users toggle it with a button instead, switch dark mode to a class and add or remove dark on the html element with JavaScript:

@custom-variant dark (&:where(.dark, .dark *));

7. Keeping markup maintainable

Long class lists are manageable if you follow a few rules:

• Extract components, not CSS. In React, Vue, Blade or any template language, make a Button or Card component once and reuse it. This is the recommended way to avoid repetition.
• Use @apply sparingly, for things you can't componentise, such as styling HTML from a CMS. In Vue or Svelte component style blocks, add @reference "../app.css"; so @apply can see your theme.
• Never build class names from strings. bg-${color}-500 won't work, because Tailwind only generates classes it can find written in full. Map values to complete class names instead, such as { red: 'bg-red-500', green: 'bg-green-500' }.
• Let a formatter sort classes. The official Prettier plugin for Tailwind orders classes consistently, and the Tailwind CSS IntelliSense extension for VS Code autocompletes them.

8. Upgrading from Tailwind v3

The official upgrade tool handles most of the work. Run it in a new Git branch and review the diff:

npx @tailwindcss/upgrade

Changes to check by hand afterwards:

• Renamed utilities: the old shadow-sm is now shadow-xs and shadow is shadow-sm (the same shift applies to rounded, blur and drop-shadow); outline-none is outline-hidden; bg-gradient-to-r is bg-linear-to-r; flex-shrink-0 is shrink-0.
• Changed defaults: ring is now 1px (use ring-3 for the old look), and borders default to the current text colour instead of grey.
• Removed utilities: bg-opacity-* and similar are gone; use the slash syntax such as bg-black/50.
• Browser support: v4 targets modern browsers (Safari 16.4+, Chrome 111+, Firefox 128+). If you must support older browsers, stay on v3.4.

9. Running this on Domain India

Tailwind runs at build time, so what you deploy is an ordinary CSS file. That means a Tailwind site runs on any hosting:

• Shared hosting (cPanel, DirectAdmin, Webuzo): build on your computer (npm run build), then upload the output folder to public_html with FTP or the File Manager. For PHP or Laravel projects, upload the compiled assets with the rest of the site. See what settings you need to upload your website.
• App Platform: connect your repository and Node.js projects are detected and built automatically, so the Tailwind build runs on every deploy. Other stacks need a Dockerfile. Start with App Platform: getting started.
• VPS: self-managed, with full control over your build and web server.

Prices on the cards are Domain India list prices and exclude 18% GST.

Ready to launch your Tailwind site? Compare cPanel hosting for static and PHP sites, the App Platform for Node.js builds, or open a support ticket if you need help uploading your build.