Nuxt•4w ago

Bug: Updated to Tailwind v4 in my Nuxt app, background gradient bug that appears only on iOS Chrome

The styling gets messed up but ONLY on Chrome on iPhone (iPhone is running iOS 26). This same issue does NOT happen on Safari on iPhone. Here are the Tailwind classes used on this text bg-gradient-to-b from-white/85 via-white/85 to-white/70 bg-clip-text text-transparent. I just migrated to Tailwind v4. This was not an issue on v3. Also, this bug does NOT happen on initial page load which gets loaded as an SSR page BUT afterwards the website works as a SPA and when you navigate to any other page, the Tailwind styling related to any kind of background gradient colors goes crazy. I am unable to replicate this bug on my laptop in any way. Any ideas on how to approach solving this? (other than the obvious solution of migrating back to Tailwind v3) Also, if you're using Tailwind 4 it might be useful to check if it's working well on Chrome iOS.

6 Replies

kapa.ai•4w ago

Hi @MyetaM. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not contain specific information about Tailwind v4 background gradient bugs on iOS Chrome or how to resolve this issue in Nuxt applications. The knowledge sources do contain some general information about Tailwind CSS integration with Nuxt, such as configuration issues with other UI libraries and CSS layer processing, but none specifically address: - Tailwind v4 migration issues in Nuxt - Background gradient rendering problems on iOS Chrome - SPA navigation-related styling bugs with Tailwind v4 - Browser-specific CSS issues with bg-gradient-to-b, bg-clip-text, or text-transparent classes Since this appears to be a browser-specific rendering issue that only occurs on Chrome iOS after SPA navigation with Tailwind v4, I would recommend: 1. Checking the Tailwind CSS v4 documentation and GitHub issues for known iOS Chrome compatibility problems 2. Reporting this issue to the Tailwind CSS repository if it's not already documented 3. Checking if there are any PostCSS configuration changes needed for Tailwind v4 in Nuxt (though the knowledge sources don't provide specific guidance on this) The knowledge sources do not explicitly mention Tailwind v4 compatibility or migration guides for Nuxt, so I cannot provide evidence-based solutions for your specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

MyetaMOP•4w ago

My website if anyone wants to test this issue themselves is: https://www.dexdia.com/

Dexterity Diagnostics

Dexterity Diagnostics - Tools and research on human strength

Tools and resources for grip strength like the DEXDIA GX smart hand grip dynamometer as well as the GripMeter mobile apps and online resources like the Grip Calculator and Grip Strength Norms.

MyetaMOP•4w ago

Ok, seemed to have been a caching related issue, where it might have cached something from a previous version of my website. In the Chrome app on iPhone, I just went and selected "Delete Browsing Data" with the time range set to "15 min", and now the website works completely fine and I can't even replicate the issue anymore. @kapa.ai is there a nuxt config option I can set so that if users have any cached data from the previous versions of the app, that the old cache gets deleted?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, there isn't a direct Nuxt config option to automatically clear cached data from previous versions of the app. However, there are several approaches mentioned: Build Assets Directory with Version One solution is to compile chunks in a new subfolder for each build, which ensures files don't get cached from previous versions. According to a GitHub issue discussion, you can use:

export default defineNuxtConfig({
  app: {
    baseURL: '/',
    buildAssetsDir: `/_nuxt/v${Math.floor(Date.now() / 1000).toString()}/`,
  },
})

export default defineNuxtConfig({
  app: {
    baseURL: '/',
    buildAssetsDir: `/_nuxt/v${Math.floor(Date.now() / 1000).toString()}/`,
  },
})

You can also set this per environment:

buildAssetsDir: (process.env.NODE_ENV === 'development') ? '/_nuxt/' : `/_nuxt/v${Math.floor(Date.now() / 1000).toString()}/`,

buildAssetsDir: (process.env.NODE_ENV === 'development') ? '/_nuxt/' : `/_nuxt/v${Math.floor(Date.now() / 1000).toString()}/`,

Build Assets File Name Prefix Alternatively, Nuxt has a buildAssetsFileNamePrefix option that allows you to add version identifiers to asset files:

export default defineNuxtConfig({
  app: {
    buildAssetsFileNamePrefix: 'v1-'
  }
})

export default defineNuxtConfig({
  app: {
    buildAssetsFileNamePrefix: 'v1-'
  }
})

This can also be set via environment variable:

NUXT_APP_BUILD_ASSETS_FILE_NAME_PREFIX=custom- node .output/server/index.mjs

NUXT_APP_BUILD_ASSETS_FILE_NAME_PREFIX=custom- node .output/server/index.mjs

Important Note These solutions primarily address asset file caching (JavaScript/CSS chunks). For data caching issues with useFetch or useAsyncData, the knowledge sources mention using unique key values or custom getCachedData functions, but these don't automatically clear cache from previous app versions. If you're using a CDN like Cloudflare, you may also need to programmatically purge the cache after each deployment, particularly for everything inside the _nuxt directory. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Gaming

Programming

Bug: Updated to Tailwind v4 in my Nuxt app, background gradient bug that appears only on iOS Chrome

Did you find this page helpful?