[SOLVED] Tailwind CSS Build Issues in Next.js 13 with the App Router

Published on Sunday 9 June 2024

[SOLVED] Tailwind CSS Build Issues in Next.js 13 with the App Router

In this blog post, we address an issue encountered when integrating Tailwind CSS with Next.js 13 using the App Router.

When working with Next.js 13 and the new App Router, integrating Tailwind CSS can sometimes present challenges, particularly during the build process. In this post, I'll describe an issue encountered with Tailwind CSS and Next.js and provide a clear solution to resolve it.

The Problem

When deploying a Next.js project using the vercel command or running npm run build, you might encounter an error similar to the following:

Error: Command "npm run build" exited with 1
SyntaxError: Invalid or unexpected token

This error often indicates an issue with how Tailwind CSS is being processed. Specifically, you might see this error if Tailwind CSS is imported directly in component files:

import 'tailwindcss/tailwind.css'; // This can cause conflicts

The Solution

To resolve this issue, you should ensure that Tailwind CSS is correctly configured and imported only in the global CSS file, which is then included in your root layout.

That means you should delete any such line like import 'tailwindcss/tailwind.css';.

That solved the problem for me.

In case you still have issues, here's a step-by-step guide to setting up Tailwind CSS properly in a Next.js 13 project with the App Router.

Install Tailwind CSS and Dependencies. First, ensure that Tailwind CSS and its dependencies are installed:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure Tailwind CSS. Update your tailwind.config.js file to include the paths to your content:

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}', // Adjust paths based on your folder structure
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Setup PostCSS Configuration. Ensure your postcss.config.js file includes Tailwind CSS and Autoprefixer:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Create and Configure Global CSS. Create a global CSS file (e.g., globals.css) and add the Tailwind directives:

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Import Global CSS in Root Layout. Import the global CSS file in your root layout file (layout.tsx):

// app/layout.tsx
import './globals.css';
import { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Remove Direct TailwindCSS Imports from Component Files. Ensure that Tailwind CSS is not imported directly in your component files.

Clean and Rebuild Your Project. Clean the build artifacts and rebuild your project to ensure changes take effect:

rm -rf .next
npm run build

Conclusion

By following these steps, you can resolve the build issues related to Tailwind CSS in your Next.js 13 project with the App Router. This approach ensures that Tailwind CSS is correctly configured and applied globally, preventing conflicts and build errors.

If you continue to encounter issues, please contact me here and include the URL of the post in your message.