Create a Next.js app with Tailwind support

The quickest way to start using Tailwind CSS in your Next.js project is to use the Next.js + Tailwind CSS Example. This will automatically configure your Tailwind setup based on the official Next.js example. If you'd like to configure Tailwind manually, continue with the rest of this guide.

Run this command from an empty directory:

You're all set!

Connected to local nstal

Oops! Please stop nstal CLI and refresh this page

Create your project

Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App.

Run the commands:

npx create-next-app my-project --eslint --js --src-dir --experimental-app --import-alias "@/*"

cd my-project

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

Run the commands:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

Populate tailwind.config.js with:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./src/app/globals.css file.

Add the following at the beginning of src/app/globals.css:

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

Start using Tailwind in your project

Start using Tailwind's utility classes to style your content.

Populate src/app/page.js with:

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

Start your build process

Run your build process.

Run the command:

yarn dev

Visit your project

Tailwind is setup!

Open http://localhost:3000/ in another tab