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.

[Kitesource]

face the same

[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

[wunderlichh]

Yeah same.

[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.

[ECROF88]

Yes I facing the same on 133 version. Anyone know when it can be fixed?

[VedantaKaushik]

The issue is specific to certain operating system. I however have not found any solution.

[mrofisr]

Any update for this issues?

[nikander777]

no updates?

[Ehtz]

updates?

[Ehtz]

CSS Classes Not Working for Tailwind 4.1.2 on Chrome for Android 10

[mrofisr]

I believe this issue has been resolved in the latest version. I tested it in my private project, and everything is working well again.

[ignityco]

do you upgrade it manually? or how?

[mrofisr]

i just fresh install in others project and i tested it, everything is working well

[Mourdraug]

still experiencing the same @ 4.1.13

[rozsazoltan]

TailwindCSS ultimately generates native CSS. I believe the problem is more likely in the browser. Try to reproduce the issue in a minimal version using the CLI, then manually edit the output.css to investigate the problem. TailwindCSS fundamentally targets Baseline 2023 browsers and supports nearly 100% of all properties on them.