Tailwind CSS Classes Not Working on Chrome for Android 14 #16366

Activity

1. chunzi commented on Feb 8, 2025

   

   chunzi

   on Feb 8, 2025

   Last edited by chunzi

   More actions

   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.
2. eugenioestrada commented on Feb 8, 2025

   

   eugenioestrada

   on Feb 8, 2025

   More actions

   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

   👀React with 👀1Reacted by Miguel Amaya
3. wongjn commented on Feb 8, 2025

   

   wongjn

   on Feb 8, 2025

   Collaborator

   More actions

   @eugenioestrada, could it be this, #16150 (comment)?
4. savlonbhoi commented on Feb 8, 2025

   

   savlonbhoi

   on Feb 8, 2025

   More actions

   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.
5. tailwindlabs

   locked and limited conversation to collaborators on Feb 10, 2025
6. philipp-spiess

   converted this issue into a discussion #16398 on Feb 10, 2025