bug: Tailwind CSS v4.x + Next.js ESM Module Resolution Issue

[RandomNameQ]

Provide environment information

Environment

• Next.js 15.2.3 (App Router)
• TypeScript
• ESM modules (package.json: "type": "module")

Describe the bug

When using Tailwind CSS v4.x in a Next.js project with ESM modules, build fails with:

Module not found: Can't resolve '..'

Reproduction repo

https://github.com/t3-oss/create-t3-app/

To reproduce

This occurs because Tailwind generates CSS with relative URL paths (url(..)) that cannot be properly resolved in an ESM environment.

Steps to Reproduce

1. Create a Next.js project with "type": "module" in package.json
2. Install latest Tailwind CSS (v4.x)
3. Run npm run dev
4. Observe build failure with path resolution errors

Additional information

Solution

1. Downgrade Tailwind CSS to a stable version

npm uninstall tailwindcss @tailwindcss/postcss autoprefixer
npm install -D tailwindcss@3.3.3 postcss autoprefixer

2. Use ESM syntax in config files

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-sans)'],
      },
    },
  },
  plugins: [],
}

postcss.config.js:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. Simplify globals.css

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

@layer base {
  :root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
}

Root Cause

The fundamental issue is a compatibility conflict between:

• Next.js module resolution in ESM mode
• Tailwind CSS v4.x's CSS generation with relative paths
• Different path handling between CommonJS and ESM modules