Setup Next.js with Tailwind CSS

Create a Next.js project

Open your Terminal and type:

npx create-next-app
# or
yarn create-next-app

Install Tailwind CSS

Now, we need to install Tailwind CSS with dependency, so open Terminal in the project directory and type:

npm i -D tailwindcss postcss autoprefixer
# or
yarn add -D tailwindcss postcss autoprefixer

Configure Tailwind CSS

Generate a Tailwind config file for your project using the Tailwind CLI:

npx tailwindcss init -p

This will create a minimal tailwind.config.js file at the root of your project:

1module.exports = {
2  purge: [],
3  darkMode: false, // or 'media' or 'class'
4  theme: {
5    extend: {},
6  },
7  variants: {
8    extend: {},
9  },
10  plugins: [],
11}

It will also create a postcss.config.js file at the root of your project that includes tailwindcss and autoprefixer already configured:

1module.exports = {
2  plugins: {
3    tailwindcss: {},
4    autoprefixer: {},
5  },
6}

If you want to use a custom config file name, then see here

Using Tailwind CSS

Create tailwind.css file inside styles directory and added the following:

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5@layer base {}

Import your CSS

Import the stylesheet that we created inside pages/_app.js.

1import '../styles/globals.css'
2import '../styles/tailwind.css'
3
4function MyApp({ Component, pageProps }) {
5    return <Component {...pageProps} />
6}
7
8export default MyApp;

You can also import tailwind.css file inside your global css.

We finished, now you can run the project to see Tailwind CSS, so open Terminal in the project directory and type:

npm run dev
# or
yarn dev