Webpack Errors after Tailwind 4 Upgrade #17660

58bits · 2025-04-12T17:13:38Z

58bits
Apr 12, 2025

We've tried several times now to upgrade a Next.js 15 project to use Tailwindcss 4 . The Next.js app is located in a pnpm monorepo - but it is the only app using Tailwind - and so we're assuming should be relatively self contained?

Our postcss.config.js configuration looks like this...

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

export default config;

Our next.config.ts looks like this...

import type { NextConfig } from 'next'

import { withPayload } from '@payloadcms/next/withPayload'

const nextConfig: NextConfig = {
  output: 'standalone',
  productionBrowserSourceMaps: false,
  reactStrictMode: true,
  experimental: {
    reactCompiler: false
  }
}

export default withPayload(nextConfig)

Our tailwind css file is loaded via a global.css in the root Layout.tsx - and looks like this...

@import "./tailwind.css";

@import "./app.css";

And our tailwind.css file looks like this... (note that we normally disable preflight.css)

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@custom-variant dark (&:is(.dark *));

@theme {
  --breakpoint-*: initial;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1320px;
  --breakpoint-2xl: 1536px;

  --font-*: initial;
  --font-sans:
    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: Merriweather, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-display:
    Roboto, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-mono:
    'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;

  --color-theme-25: oklch(from var(--theme-25) l c h);
  --color-theme-50: oklch(from var(--theme-50) l c h);
  --color-theme-100: oklch(from var(--theme-100) l c h);
  --color-theme-200: oklch(from var(--theme-200) l c h);
  --color-theme-300: oklch(from var(--theme-300) l c h);
  --color-theme-400: oklch(from var(--theme-400) l c h);
  --color-theme-500: oklch(from var(--theme-500) l c h);
  --color-theme-600: oklch(from var(--theme-600) l c h);
  --color-theme-700: oklch(from var(--theme-700) l c h);
  --color-theme-800: oklch(from var(--theme-800) l c h);
  --color-theme-900: oklch(from var(--theme-900) l c h);
  --color-theme-950: oklch(from var(--theme-950) l c h);
  --color-primary-25: oklch(from var(--primary-25) l c h);
  --color-primary-50: oklch(from var(--primary-50) l c h);
  --color-primary-100: oklch(from var(--primary-100) l c h);
  --color-primary-200: oklch(from var(--primary-200) l c h);
  --color-primary-300: oklch(from var(--primary-300) l c h);
  --color-primary-400: oklch(from var(--primary-400) l c h);
  --color-primary-500: oklch(from var(--primary-500) l c h);
  --color-primary-600: oklch(from var(--primary-600) l c h);
  --color-primary-700: oklch(from var(--primary-700) l c h);
  --color-primary-800: oklch(from var(--primary-800) l c h);
  --color-primary-900: oklch(from var(--primary-900) l c h);
  --color-primary-950: oklch(from var(--primary-950) l c h);
  --color-secondary-25: oklch(from var(--secondary-25) l c h);
  --color-secondary-50: oklch(from var(--secondary-50) l c h);
  --color-secondary-100: oklch(from var(--secondary-100) l c h);
  --color-secondary-200: oklch(from var(--secondary-200) l c h);
  --color-secondary-300: oklch(from var(--secondary-300) l c h);
  --color-secondary-400: oklch(from var(--secondary-400) l c h);
  --color-secondary-500: oklch(from var(--secondary-500) l c h);
  --color-secondary-600: oklch(from var(--secondary-600) l c h);
  --color-secondary-700: oklch(from var(--secondary-700) l c h);
  --color-secondary-800: oklch(from var(--secondary-800) l c h);
  --color-secondary-900: oklch(from var(--secondary-900) l c h);
  --color-secondary-950: oklch(from var(--secondary-950) l c h);
  --color-accent-25: oklch(from var(--accent-25) l c h);
  --color-accent-50: oklch(from var(--accent-50) l c h);
  --color-accent-100: oklch(from var(--accent-100) l c h);
  --color-accent-200: oklch(from var(--accent-200) l c h);
  --color-accent-300: oklch(from var(--accent-300) l c h);
  --color-accent-400: oklch(from var(--accent-400) l c h);
  --color-accent-500: oklch(from var(--accent-500) l c h);
  --color-accent-600: oklch(from var(--accent-600) l c h);
  --color-accent-700: oklch(from var(--accent-700) l c h);
  --color-accent-800: oklch(from var(--accent-800) l c h);
  --color-accent-900: oklch(from var(--accent-900) l c h);
  --color-accent-950: oklch(from var(--accent-950) l c h);
  --color-gray-25: oklch(from var(--gray-25) l c h);
  --color-gray-50: oklch(from var(--gray-50) l c h);
  --color-gray-100: oklch(from var(--gray-100) l c h);
  --color-gray-200: oklch(from var(--gray-200) l c h);
  --color-gray-300: oklch(from var(--gray-300) l c h);
  --color-gray-400: oklch(from var(--gray-400) l c h);
  --color-gray-500: oklch(from var(--gray-500) l c h);
  --color-gray-600: oklch(from var(--gray-600) l c h);
  --color-gray-700: oklch(from var(--gray-700) l c h);
  --color-gray-800: oklch(from var(--gray-800) l c h);
  --color-gray-900: oklch(from var(--gray-900) l c h);
  --color-gray-950: oklch(from var(--gray-950) l c h);
  --color-canvas-25: oklch(from var(--canvas-25) l c h);
  --color-canvas-50: oklch(from var(--canvas-50) l c h);
  --color-canvas-100: oklch(from var(--canvas-100) l c h);
  --color-canvas-200: oklch(from var(--canvas-200) l c h);
  --color-canvas-300: oklch(from var(--canvas-300) l c h);
  --color-canvas-400: oklch(from var(--canvas-400) l c h);
  --color-canvas-500: oklch(from var(--canvas-500) l c h);
  --color-canvas-600: oklch(from var(--canvas-600) l c h);
  --color-canvas-700: oklch(from var(--canvas-700) l c h);
  --color-canvas-800: oklch(from var(--canvas-800) l c h);
  --color-canvas-900: oklch(from var(--canvas-900) l c h);
  --color-canvas-950: oklch(from var(--canvas-950) l c h);
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --grid-template-columns-auto-fit-240: repeat(auto-fill, minmax(240px, 1fr));
  --grid-template-columns-auto-fit-280: repeat(auto-fill, minmax(280px, 1fr));
  --grid-template-columns-auto-fit-320: repeat(auto-fill, minmax(320px, 1fr));
  --grid-template-columns-auto-fit-480: repeat(auto-fill, minmax(480px, 1fr));

  --shadow-slider: 0 0 0 5px rgba(0, 0, 0, 0.3);
}

We then receive the following webpack error when we try to build the project...

@apps/next:build: Failed to compile.
@apps/next:build:
@apps/next:build: ./src/ui/styles/global.css.webpack[javascript/auto]!=!../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/ui/styles/global.css
@apps/next:build: TypeError: Cannot read properties of undefined (reading 'All')

We've tried every combination of loading the tailwind.css file - including directly in Layout.tsx - but nothing works.

This identical configuration (without withPayload) and using Vite, is working fine in another monorepo project.

This project was also working fine with Tailwind 3.4.17

Any thoughts or suggestions greatly appreciated.

Answered by 58bits

Apr 13, 2025

Hi @wongjn - thanks for the reply. We've just solved this. We created a reproducible git repo to post here, and discovered there was a tailwind.css override in our pnpm monorepo root package.json. O.O

View full answer

wongjn · 2025-04-12T18:16:19Z

wongjn
Apr 12, 2025

Consider providing a git repo that reproduces the unexpected behavior.

0 replies

58bits · 2025-04-13T00:52:40Z

58bits
Apr 13, 2025
Author

Hi @wongjn - thanks for the reply. We've just solved this. We created a reproducible git repo to post here, and discovered there was a tailwind.css override in our pnpm monorepo root package.json. O.O

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack Errors after Tailwind 4 Upgrade #17660

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Webpack Errors after Tailwind 4 Upgrade #17660

58bits Apr 12, 2025

Replies: 2 comments

wongjn Apr 12, 2025

58bits Apr 13, 2025 Author

58bits
Apr 12, 2025

wongjn
Apr 12, 2025

58bits
Apr 13, 2025
Author