Tailwind CSS responsive breakpoint overrides not working

Question

I can't figure out why the responsive overrides of tailwind are not working in my project.

For example, I'd like the following text in div to be centered below the small screen breakpoint and left-aligned above the sm breakpoint. The following code seems to work when I try it in Codepen. However, it does not work in my laravel project.

<div class="text-grey-4 flex-1 px-6 sm:text-left text-center self-center">  
    <h2 class="h2"><b>Heading Text</b></h2>
    <div>
      Lorum ipsum lorum ispum lorum ipsum Lorum ipsum lorum ispum lorum ipsum Lorum ipsum lorum ispum lorum ipsum
    </div>
 </div>

Any ideas why this doesn't work in my Laravel project?

Answer 1

Every time you design something with Tailwind, start from mobile.

<div class="text-center sm:text-left">
  Lorem ipsum dolor sit amet.
</div>

So basically on this example. Instead of saying:

Text should be centered only on smaller devices.

Do this:

Text should be always centered, and aligned left for bigger devices.

https://codepen.io/anon/pen/wLeoYV

Answer 2

The problem is: Tailwind is a mobile-first framework as here, which means that the unprefixed class props will be used as mobile style, and the style of the prefixed(starting with sm, md, lg) will be used for that screen breakpoint and above (NOT BELOW)

So in your case it should be in the opposite way

class='text-left sm:text-center'