title: Tailwind CSS - Responsive breakpoints as components
body: <p>How should I deal with responsive breakpoints as components in Tailwind?</p>
  
  <p>Without Tailwind, I used to declare breakpoints as a scss mixins:</p>
  
  <pre><code>@mixin tablet-portrait {
    @media (min-width: 700px) {
      @content;
    }
  }
  </code></pre>
  
  <p>Then:</p>
  
  <pre><code>@include tablet-portrait {
    // whatever
  }
  </code></pre>
  
  <p>I know that Tailwind has responsive utility clases to use it inline as <code>md:color-red</code> but I need to abstract this breakpoins as components, as in above example.</p>
  
  <p>How should I extract Tailwind breakpoints from Tailwind config file?</p>