Install Tailwind CSS

Tailwind CSS v4

Configure PostCSS (v4)

Create a postcss.config.mjs file in your project root:

postcss.config.mjs

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

Add Tailwind to your CSS (v4)

Add the Tailwind directives to your CSS file (e.g., globals.css):

app/globals.css

@import "tailwindcss";

Tailwind CSS v3 (Stable)

Initialize Tailwind CSS (v3)

Update your tailwind.config.js file to include paths to your template files:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind to your CSS (v3)

app/globals.css

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

Verify Installation

Start your development server and add some Tailwind classes to verify everything is working:

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

If the text appears blue, bold, and underlined, Tailwind CSS is working correctly!