Tailwind CSS Classes Not Working on Chrome for Android 14

[VedantaKaushik]

What version of Tailwind CSS are you using?
v4.0.4

What build tool (or framework) are you using?
Next.js 15.1.6 with PostCSS 8.5.1

What version of Node.js are you using?
v22.13.1

What browser are you using?
Chrome (latest) and other Chromium-based browsers on Android 14

What operating system are you using?
Android 14

Describe Your Issue

In my Next.js + Tailwind CSS project, I have encountered an issue where some Tailwind classes work in one component but fail in another, specifically on Chrome (and other Chromium-based browsers) on Android 14.

• Observed Behavior:

The following class works correctly in one component but not in another:

<div className="font-semibold text-xl text-gray-800">{cardProps.total}</div>

• The same class applies correctly on desktop and Firefox mobile, but not on Chrome for Android 14.

• No errors appear in the console, but styles fail to apply.

Steps to Reproduce

1. Open a Tailwind-powered webpage on Chrome for Android 14

2. Compare the rendering of the following component:

<React.Fragment>
   <div className="flex justify-center items-center gap-2 sm:m-4 flex-col sm:w-96 w-64 sm:p-6 p-3 m-0 bg-white border border-gray-200 rounded-lg shadow">
     <div className="mb-2 text-2xl font-bold tracking-tight text-gray-800">
       <span>{cardProps.heading}</span>
     </div>
     <div className="font-semibold text-xl text-gray-800">
       <span>{cardProps.total}</span>
     </div>
   </div>
 </React.Fragment>

4. Observe that one card applies styles correctly, while another does not display font-semibold text-xl text-gray-800 correctly.

5. Test the same page in Firefox for Android or desktop Chrome → styles apply correctly.

[chunzi]

Seems Chrome on Andriod still with lower version, mine is v88, which dosen't support CSS @layer at-rule.

Instead of @import 'tailwindcss'; line with:

@import 'tailwindcss/theme.css';                                                                                                                                                                                                                
@import 'tailwindcss/preflight.css';                                                                                                                                                                                                            
@import 'tailwindcss/utilities.css'; 

which not using 'layer' might works, not fully.

I am waiting better solution for now too.

[eugenioestrada]

I don't know if it's related but, hover States are not working too in Google Chrome 133 and Microsoft Edge 133

20250208-0915-40.1540170.mp4

[wongjn]

@eugenioestrada, could it be this, #16150 (comment)?

[savlonbhoi]

What version of Tailwind CSS are you using? v4.0.4

What build tool (or framework) are you using? Next.js 15.1.6 with PostCSS 8.5.1

What version of Node.js are you using? v22.13.1

What browser are you using? Chrome (latest) and other Chromium-based browsers on Android 14

What operating system are you using? Android 14

Describe Your Issue

In my Next.js + Tailwind CSS project, I have encountered an issue where some Tailwind classes work in one component but fail in another, specifically on Chrome (and other Chromium-based browsers) on Android 14.

• Observed Behavior:

The following class works correctly in one component but not in another:

<div className="font-semibold text-xl text-gray-800">{cardProps.total}</div>

• The same class applies correctly on desktop and Firefox mobile, but not on Chrome for Android 14.
• No errors appear in the console, but styles fail to apply.

Steps to Reproduce

1. Open a Tailwind-powered webpage on Chrome for Android 14
2. Compare the rendering of the following component:

<React.Fragment>
   <div className="flex justify-center items-center gap-2 sm:m-4 flex-col sm:w-96 w-64 sm:p-6 p-3 m-0 bg-white border border-gray-200 rounded-lg shadow">
     <div className="mb-2 text-2xl font-bold tracking-tight text-gray-800">
       <span>{cardProps.heading}</span>
     </div>
     <div className="font-semibold text-xl text-gray-800">
       <span>{cardProps.total}</span>
     </div>
   </div>
 </React.Fragment>

4. Observe that one card applies styles correctly, while another does not display font-semibold text-xl text-gray-800 correctly.
5. Test the same page in Firefox for Android or desktop Chrome → styles apply correctly.

yes, facing the same.