Hydration Mismatch Error in Next.js with Tailwind CSS and Dynamic Class Names

Issue Description:

I am encountering a persistent hydration warning in my Next.js application that uses Tailwind CSS for styling. The error persists even after removing dynamic class names, suggesting a deeper inconsistency in the server-client rendering process. This issue occurs across all major browsers (Chrome, Edge, Firefox) and also persists with a fresh fork of the TailNext repository.

Full Error Message: ( From Chrome)

app-index.js:33 Warning: Prop `className` did not match. Server: "motion-safe:scroll-smooth 2xl:text-[24px] __variable_aaf875 font-sans dark" Client: "motion-safe:scroll-smooth 2xl:text-[24px] __variable_aaf875 font-sans"
    at html
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:577:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)

Steps to Reproduce:

Clone the repo and install dependencies. Run the application in development mode using npm run dev. Open the application in a browser to see the error in the console as the page loads.

Expected Behavior:

The application should hydrate without any warnings, with the server-rendered markup matching the client-rendered markup exactly.

Actual Behavior:

The application logs a warning about extra attributes (class, style) that are not expected during the hydration process, indicating a discrepancy between the server and client output.

Attempted Fixes:

I have tried removing all dynamic class and style attributes from the tag. Ensured that the dynamic class names are consistent between server and client renders. Checked for any third-party scripts that might alter the DOM before hydration. Updated all related dependencies to their latest versions.

Additional Information:

Next.js version: 14.2.2

Code snippet from root layout.tsx component

return (
  <html lang="en" className={`motion-safe:scroll-smooth 2xl:text-[24px] ${customFont.variable} font-sans`}> 
    <head>
      <meta charSet="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body className="tracking-tight antialiased text-gray-900 dark:text-slate-300">
      <Providers>
        <Header />
        <Suspense fallback={<Loading />}>
          <main>{children}</main>
        </Suspense>
        <Footer />
      </Providers>
    </body>
  </html>
);

Issue line:

<html lang="en" className={motion-safe:scroll-smooth 2xl:text-[24px] ${customFont.variable} font-sans}>

Tags:

Next.js, hydration error, SSR, Tailwind CSS, bug

onwidget / tailnext