#tailwindcss nuxt 4, nuxt/fonts

5 messages · Page 1 of 1 (latest)

forest stirrupBOT Jul 28, 2025, 3:30 AM

Hi @honest cobalt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

This issue appears to be related to a hydration mismatch rather than a direct problem with TailwindCSS, Nuxt 4, or the Nuxt Fonts module. According to a user who experienced a similar problem after upgrading from Nuxt 3 to Nuxt 4, TailwindCSS styles would initially appear but then disappear after a page reload or hydration event. The root cause was a hydration mismatch: when the client and server render different HTML, Nuxt triggers a "refresh" to reconcile the difference, which in Nuxt 4 can result in CSS not being loaded or applied correctly. Once the hydration mismatch was resolved, the CSS issue disappeared and Tailwind classes were applied as expected.

Key points:

The problem is not with TailwindCSS or Nuxt Fonts directly, but with hydration mismatches in your app.
Fixing the hydration mismatch (ensuring your server and client render the same HTML) should resolve the issue with TailwindCSS classes not being applied after reloads or navigation.

What you should do:

Carefully check your components and pages for any code that might cause the server-rendered HTML to differ from the client-rendered HTML (e.g., code that uses browser-only APIs, random values, or time-based logic during rendering).
Make sure your font loading and usage is consistent and does not introduce any client-only logic that could affect rendering.

Reference: Github Issue: TailwindCSS styles disappear after build in Nuxt 4 (works in dev)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@honest cobalt Kapa.ai is still learning and improving, please let me know how I did by reacting below.

forest stirrupBOT Jul 28, 2025, 4:01 AM

Let me check the knowledge base for you again. One moment! :books:

Based on the code you provided, there is nothing obviously problematic that would directly cause a hydration mismatch or TailwindCSS class application issues. The template uses static content and standard Nuxt components (NuxtImg), and there are no browser-only APIs, random values, or time-based logic in the snippet.

However, the knowledge sources indicate that hydration mismatches can be subtle and may be caused by other parts of your page or app, not just the visible template code. For example, if you have any logic elsewhere (in scripts, composables, or parent components) that uses browser-only APIs (like window, localStorage), random values, or time-dependent data during SSR, it could cause a mismatch and lead to the CSS issues you described. The Nuxt documentation specifically lists these as common causes of hydration problems, which can result in styles not being applied as expected after reloads or navigation in production builds Docs: Hydration Best Practices.

Additionally, a user report confirms that resolving a hydration mismatch fixed their TailwindCSS disappearing issue in Nuxt 4 Github Issue: TailwindCSS styles disappear after build in Nuxt 4 (works in dev).

Summary:
Your provided template does not show any direct cause for hydration mismatch. If the issue persists, review the rest of your page/component logic for SSR/client differences, as the root cause is likely elsewhere in your codebase. If you need more targeted help, consider sharing the full page/component including `<script>` and any composables or plugins used.