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

10 messages · Page 1 of 1 (latest)

sonic jacinth
#

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.

59130B7B-1D48-4AAB-8CB1-329753096089_copy.PNG 94EDC485-88AC-41B7-864F-206AAD2C9FEB_copy.PNG
gritty jungleBOT
#

Hi @sonic jacinth. 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:

#

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

sonic jacinth
sonic jacinth
#

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.

#

@gritty jungle 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?

gritty jungleBOT
#

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()}/`,
  },
})

You can also set this per environment:

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

This can also be set via environment variable:

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.