tailwind - @screen not generate media queries in scss

Question

Angular 12 && tailwind ^3.0.12

After compilation screen should generate media queries based on breakpoint but nothing generate

section {
  @apply w-full px-6 py-24;

  @screen sm {
    @apply py-14;
  }
  @screen md {
    @apply px-0 py-20 max-w-5xl mx-auto;
  }
}

Answer 1

Try using screen directive at the top level.

section {
  @apply w-full px-6 py-24;
}

@screen md {  
  section {
     @apply px-0 py-20 max-w-5xl mx-auto;
  } 
} 

Answer 2

I implemented my mixin breakpoint maybe this help you.

mixins.scss

  @mixin breakpoint($size) {
      @if $size == sm {
        @media (max-width: 640px) {
          @content;
        }
      } @else if $size == md {
        @media (min-width: 768px) {
          @content;
        }
      } @else if $size == lg {
        @media (min-width: 1024px) {
          @content;
        }
      } @else if $size == xl {
        @media (min-width: 1280px) {
          @content;
        }
      } @else if $size == 2xl {
        @media (min-width: 1536px) {
          @content;
        }
      }
    }

style.scss

section {
  @apply w-full px-6 py-24;

  @include breakpoint(sm) {
    @apply py-14;
  }
  @include breakpoint(md) {
    @apply px-0 py-20 max-w-5xl mx-auto;
  }
}