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);
}