Setting up TailwindCSS with Next.js 13 app directory.

Tailwind is the go-to CSS framework in 2023. You can build your components with it, and it integrates nicely with other libraries. When using other component libraries, you often want a little bit of CSS to sprinkle in with your regular divs and Tailwind gives that simply and cleanly.

The Next.js 13 app directory changes where to look for the CSS, but the setup is similar to previous versions. This guide will run through and show you how to set up Tailwind using the app directory.

If you haven't started using the new app directory yet, check out my guide for setting that up.

Install Tailwind

First, you need to install some new dependencies:

yarn add -SED tailwindcss postcss autoprefixer

Then, use the tailwindcss CLI to create the default configuration:

npx tailwindcss init -p

This will create a new Tailwind configuration file and a Postcss configuration file. Open the tailwind.config.js and add in where to find your CSS:

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

You'll add the "./app/**/*.{js,ts,jsx,tsx}", line. If you have any Tailwind classes in other folders, add them to this file.

The next step is to update the app/globals.css file with the Tailwind directive. Delete all the default CSS in that file and replace it with:

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

And you're ready to go! Restart your dev server and start hacking away in the app directory!