Tailwind CSS mobile-first media query not working

Question

Sometimes, but not all the time, when I'm using Tailwind CSS (in a React project with webpack), I attempt to apply classes like this:

<p className="text-2xl sm:text-3xl">Some text</p>

Expected behavior: As per the mobile-first design of Tailwind, my text would be "2xl" sized on extra small/mobile screens, and then at a minimum width of 640px, it would be sized "3xl"

Actual result: The "3xl" rule at the 640px media query breakpoint gets read in the CSS, BUT it is crossed out in Chrome dev tools, while the "2xl" size is overriding it. This should perhaps indicate that the 2xl rule has greater specificity in the cascade, which is contrary to the expected behavior of Tailwind.

--Quoted directly from Tailwind's documentation:

//Use unprefixed utilities to target mobile, and override them at larger breakpoints
<div class="text-center sm:text-left"></div>

Looking at the result of my rule above...

I'm having a hard time understanding why it would possibly not be applying the style, as I'm using Tailwind exactly as I should be.

Right?

Answer 1

The solution is this:

I was using the Material Tailwind library which I'd imported using the style-loader in webpack. For one, I'm using Tailwind v3 whereas the library is dependent on Tailwind v2. Also, and primarily, it was getting loaded into a style tag and referenced after the main.css file. No wonder it was causing problems.

I tried switching up the loading/import process so that it gets loaded into the main.css file along with my main Tailwind library. It causes the media query issue to go away, but the components are messed up, likely due to incompatibilities between v3 and v2 of Tailwind.

Upon removing this library, it works as expected. Instead of using this library I ended up just creating my own custom components as needed without the headache of implementing dependency heavy and app-breaking libraries.

SOLVED :)