JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="liner">
<div class="header-wrapper">
<nav>
  <ul>
  <li>Link 1</li>
  </ul>
</nav>
</div>
</div>

SCSS

@mixin query-print {
    @media print {
        @content;
    }
    @at-root.body.is-print-mode #{&} {
        @content;
    }
    &.screen-only {
        display: none !important;
    }
}

html, body {
  font-family: Verdana, Arials, sans-serif;
  font-size: 12px;
  padding: 0px;
  margin: 0px;
}

.liner {
  padding: .3rem;
  background-color: #efefef;
  @include query-print {
    padding: 0px;
    background-color: #ffffff;
  }
}