Install Tailwind

This guide covers the installation of TailwindCSS.

1

Create a new project

npx create-next-app@latest my-project --typescript --eslint
cd my-project
2

Install TailwindCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
3

Configure your template paths

tailwind.config.ts / tailwind.config.js

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

      // Or if using `src` directory:
      "./src/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  };
4

Add the Tailwind directives to your CSS

globals.css

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

Start your build process

npm run dev
6

Start using Tailwind

index.tsx / index.jsx

export default function Home() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>;
}