LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 519 min read

Installing Tailwind CSS

Install Tailwind CSS via npm, configure PostCSS, and add the @tailwind directives — with setup notes for both plain projects and Next.js/Vite.

Introduction

Before you can write a single utility class, Tailwind needs to be installed and wired into your project's build process. This lesson walks through the standard npm-based installation, the PostCSS configuration that powers it, the @tailwind directives that pull Tailwind's generated CSS into your stylesheet, and how the process differs slightly for Next.js and Vite projects.

What You Will Learn
  • How to install Tailwind CSS and its peer dependencies with npm.
  • What PostCSS is and why Tailwind depends on it.
  • What the @tailwind directives do and where they go.
  • How installation differs for Next.js and Vite projects.

Prerequisites

You'll need Node.js and npm installed, since Tailwind is distributed as an npm package and relies on a build step to generate its CSS. Any recent LTS version of Node.js works fine. You can confirm your setup with a quick version check before continuing.

node -v
npm -v
Example Output

Click Run to see what this code prints.

Installing via npm

For a plain (non-framework) project, install Tailwind CSS along with PostCSS and Autoprefixer, then run Tailwind's init command to generate the two configuration files you'll need.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Files Created

Click Run to see what this code prints.

The -p flag tells Tailwind to also generate a postcss.config.js file, so you don't have to write PostCSS configuration by hand.

PostCSS Configuration

Tailwind isn't plain CSS you write by hand — it's a PostCSS plugin. PostCSS is a tool that transforms CSS using JavaScript plugins, and Tailwind uses that pipeline to scan your files, generate the utility classes you've actually used, and hand the result off to Autoprefixer to add vendor prefixes automatically.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
You Rarely Touch This File

Once postcss.config.js is generated, most projects never need to edit it again. Tailwind and Autoprefixer just quietly do their job during every build.

The @tailwind Directives

Next, create (or edit) a main CSS file and add three @tailwind directives. These are special instructions that Tailwind's PostCSS plugin replaces with its generated CSS during the build: base styles, utility classes, and component-level styles, in that order.

/* src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, tell Tailwind which files to scan for class names by setting the content option in tailwind.config.js. This is what allows the JIT compiler to know exactly which utility classes to generate.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

With that in place, import your CSS file at the root of your app (for example in main.js or index.html), and any Tailwind class you use in your markup will now generate real CSS.

Next.js / Vite Integration

The steps above are nearly identical for Next.js and Vite — both use the same npm install and the same tailwind.config.js / postcss.config.js files. The only real differences are where the global CSS file lives and gets imported.

SetupGlobal CSS LocationImport Location
Next.js (App Router)app/globals.cssImported once in app/layout.tsx
Vitesrc/index.cssImported once in src/main.tsx or main.jsx
Plain HTML projectsrc/styles/globals.css (or similar)Linked in the built <link> tag in your HTML
// app/layout.tsx (Next.js App Router)
import './globals.css';


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Common Mistakes

Avoid These Mistakes
  • Forgetting to set the content paths in tailwind.config.js — if Tailwind can't find your files, it generates no CSS for the classes you use.
  • Importing globals.css in more than one place, or forgetting to import it at all.
  • Adding Tailwind's CDN <script> tag in a production project — the CDN build is meant for quick demos only and lacks the JIT compiler's optimizations.
  • Editing postcss.config.js or tailwind.config.js by hand incorrectly and breaking the JSON-like module.exports structure.

Best Practices

  • Double-check your content array in tailwind.config.js covers every file type and folder where you write markup.
  • Keep the three @tailwind directives at the very top of your global CSS file, in the order base, components, utilities.
  • Use the framework-specific installation guide (Next.js, Vite, etc.) from Tailwind's official docs when in doubt — the steps are officially maintained per framework.
  • Restart your dev server after changing tailwind.config.js, since some tooling doesn't hot-reload configuration changes.

Frequently Asked Questions

Both frameworks already include a PostCSS pipeline, so you typically only need to add the tailwind.config.js and postcss.config.js files and the @tailwind directives — the frameworks handle running PostCSS for you.

It tells Tailwind's JIT compiler which files to scan for class names. Only classes it finds referenced in those files get generated into the final CSS output.

You can for a quick prototype, but it's not recommended for real projects — the CDN build doesn't support the JIT compiler's full feature set (like customizing your config) and produces a much larger, unoptimized stylesheet.

They control layering order: base resets/defaults, components for any reusable component classes, and utilities for the utility classes you'll use most. Keeping the order correct ensures utility classes can properly override base and component styles.

Key Takeaways

  • Tailwind installs via npm alongside PostCSS and Autoprefixer, generating tailwind.config.js and postcss.config.js.
  • The @tailwind base/components/utilities directives pull Tailwind's generated CSS into your stylesheet.
  • The content option in tailwind.config.js tells the JIT compiler which files to scan for class names.
  • Next.js and Vite use the same core setup, differing only in where the global CSS file lives and is imported.

Summary

You've installed Tailwind CSS, wired up PostCSS, and added the @tailwind directives to a real project. Next, you'll take a closer look at the tailwind.config.js file itself and what each of its sections controls.

Next Lesson →

Tailwind Configuration File