Tailwind not applying classes NextJS 14 | Tailwind v4

[first-andy]

What version of Tailwind CSS are you using?

For example: v4.0.11

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 14.0.2,

What version of Node.js are you using?

For example: v22.13.1

What operating system are you using?

macOS

Describe your issue

Since we upgraded to tailwind v4, our classes stopped working.
Tailwind loads in fine but classes are not applied..

We use the following postcss.config.mjs file:

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}

This is our stylesheet:

@import 'tailwindcss';

@theme {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1362px;

  --font-head: 'pf-fuel-grime', sans-serif;
  --font-campaign: 'pf-fuel-decay', sans-serif;

  --color-red-50: #fff0f2;
  --color-red-100: #ffe1e5;
  --color-red-200: #ffc8d1;
  --color-red-300: #ff9bac;
  --color-red-400: #ff6282;
  --color-red-500: #ff2c5a;
  --color-red-600: #eb0844;
  --color-red-700: #d0003c;
  --color-red-800: #ae033a;
  --color-red-900: #940738;
  --color-red-950: #53001a;

  --color-yellow-50: #fcfcea;
  --color-yellow-100: #f7f9c8;
  --color-yellow-200: #f3f494;
  --color-yellow-300: #eee856;
  --color-yellow-400: #e8da35;
  --color-yellow-500: #d7c01b;
  --color-yellow-600: #b99815;
  --color-yellow-700: #947014;
  --color-yellow-800: #7b5818;
  --color-yellow-900: #69491a;
  --color-yellow-950: #3d270b;

  --color-blue-50: #effefc;
  --color-blue-100: #c8fff8;
  --color-blue-200: #91fef4;
  --color-blue-300: #52f6ec;
  --color-blue-400: #30e4df;
  --color-blue-500: #06c6c4;
  --color-blue-600: #029e9f;
  --color-blue-700: #067d7f;
  --color-blue-800: #0b6064;
  --color-blue-900: #0e5153;
  --color-blue-950: #003033;

  --color-brown-100: #fbf5f2;
  --color-brown-500: #decbc0;
  --color-brown-700: #4c4444;
  --color-brown-950: #170202;

  /* TODO: Need to adjust these vars later on in the project timeline */
  --color-header: #decbc0;

  /* BORDER RADIUS */
  --radius-card: 8px;
  --radius-button: 8px;
  --radius-header: 12px;
  --radius-search-input: 12px;
  --radius-section: 12px;
  --radius-footer: 12px;
  --radius-header: 12px;

  /* WIDTHS */
  --spacing-search-content: 820px;

  /* SHADOWS */
  --shadow-2xs: 0 0 2px 0 rgb(0 0 0 / 0.05);
  --shadow-xs: 0 0 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 0 3px 0 rgb(0 0 0 / 0.1), 0 0 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 0 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 0 15px -3px rgb(0 0 0 / 0.1), 0 0 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 0 25px -5px rgb(0 0 0 / 0.1), 0 0 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 0 50px -12px rgb(0 0 0 / 0.25);
  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
  --drop-shadow-xs: 0 0 1px rgb(0 0 0 / 0.05);
  --drop-shadow-sm: 0 0 2px rgb(0 0 0 / 0.15);
  --drop-shadow-md: 0 0 3px rgb(0 0 0 / 0.12);
  --drop-shadow-lg: 0 0 4px rgb(0 0 0 / 0.15);
  --drop-shadow-xl: 0 0 7px rgb(0 0 0 / 0.1);
  --drop-shadow-2xl: 0 0 25px rgb(0 0 0 / 0.15);
}

@theme inline {
  --font-body: --var(font-body);
}

@layer base {
  html,
  body {
    @apply font-body flex h-auto min-h-screen flex-col;
  }

  body {
    @apply pt-9;
  }

  main {
    @apply flex-1;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-semibold;
  }

  h1 {
    @apply text-[32px];
  }

  h2 {
    @apply h2;
  }

  h3 {
    @apply text-xl font-medium leading-tight;
  }

  p {
    @apply text-lg leading-normal;
  }

  a {
    @apply font-light;
  }

  .prose-content ul {
    @apply list-disc pl-4;
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }

  @media print {
    .no-print {
      display: none;
    }
  }
}

@layer components {
  .content-block {
    h2 {
      @apply mb-3;
    }
  }

  .video-container {
    @apply relative w-full pt-[56.25%];

    > div:first-child {
      @apply absolute left-0 top-0 !h-full !w-full;
    }
  }
}

@utility container {
  @apply mx-auto px-4;
}

@utility breakout {
  @apply mx-auto w-full max-w-[1656px] px-8;
}

@utility h1 {
  @apply text-[32px];
}

@utility h2 {
  @apply text-2xl leading-tight xl:text-2xl;
}

@utility justify-self-anchor {
  justify-self: anchor-center;
}

/app/layout.jsx

import ReactDom from 'react-dom'
import NextTopLoader from 'nextjs-toploader'
import { Archivo } from 'next/font/google'

import Header from '../components/layout/Header'
import Footer from '../components/layout/Footer'
import { metadataObject } from '../helpers/metadata'
import AuthPopup from 'components/auth/AuthPopup'
import ToTop from 'components/common/ToTop'
import PageGradient from 'components/common/PageGradient'
import '../styles/main.css'

export const metadata = {
  ...metadataObject
}

export const viewport = {
  themeColor: '#000000'
}

const topLoaderConfig = {
  color: '#eb0844',
  duration: 0.3,
  showSpinner: false
}

export const revalidate = 0

const archivo = Archivo({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-body'
})

ReactDom.preload('https://use.typekit.net/mkm6duc.css', { as: 'style' })

export default function RootLayout({ children }) {
  return (
    <html lang="nl-NL" className={archivo.className}>
      <head>
        <link rel="stylesheet" href="https://use.typekit.net/mkm6duc.css" />
      </head>
      <body>
        <NextTopLoader {...topLoaderConfig} />
        <PageGradient />
        <Header />
        <AuthPopup />
        <ToTop />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  )
}

Are we missing something here?? or is nextjs14 not compatible with tailwind v4?

[philipp-spiess]

Hey! Nothing that stands out to me from the three files you shared. Do you mind putting together a reproduction that we can run locally?

[philipp-spiess]

Oh, actually, remove this line this seems like it's a recursion?

@theme inline {
  --font-body: --var(font-body);
}

Or maybe change it to:

@theme inline {
  --font-body: var(--font-body);
}

[jbutko]

@first-andy had similar issue on our nextjs app router app and the fix was to add autoprefixer prop into postccs config, this way:

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
    // this is the actual fix
    autoprefixer: {}
  }
}

Looks like autoprefixer prop is mandatory in postcss config, without it TW won't work correctly. Just a note we use v4 tailwind.

[rozsazoltan]

I think if you share your faulty reproduction, we can better help solve the problem. I don't believe the autoprefixer will fix the issue; at most, it will just hide the faulty code snippets.

• https://tailwindcss.com/docs/upgrade-guide#using-postcss

Additionally, in v4 imports and vendor prefixing is now handled for you automatically, so you can remove postcss-import and autoprefixer if they are in your project

Keep in mind that TailwindCSS v4 imposes relatively high minimum browser requirements:

• https://tailwindcss.com/docs/compatibility

It may happen that with the autoprefixer you can only fix certain properties that weren't standardized before the 2023 baseline.