Tailwind CSS Breakpoints

Question

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

Suppose, I'd like to add some padding in my parent div and want to minimise it on the md & lg screen size but it doesn't work.

<div class="text-grey-4 flex-1 lg:px-6 md:px-4 px-0 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>

Answer 1

Tailwind-css follows mobile-first breakpoint system.

Any default style added will be considered for mobile devices and classes for medium and large devices needs to be specified seperately.

Consider the following code:

<div class="py-2 md:py-32 lg:py-64 text-4xl">
  <h1>Hello</h1>
</div>

Output in mobile device:

Output in medium device:

Output in large device: