JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="container"></div>

SCSS

// Establish a base unit
$base-unit: 1rem;

// Set sizing vars based off the base unit
$xxs-unit: $base-unit * .25;
$xs-unit: $base-unit * .5;
$sm-unit: $base-unit * .75;
$md-unit: $base-unit;
$lg-unit: $base-unit * 1.25;
$xl-unit: $base-unit * 1.5;
$xxl-unit: $base-unit * 3;

// Set some breakpoint variables
$mobile: $base-unit * 34;
$tablet: $base-unit * 48;
$desktop: $base-unit * 62;
$desktop-large: $base-unit * 72;

// Breakpoint variables
$breakpoint-mobile: 'min-width:' $mobile;                // 544px    xs -> 544px and under
$breakpoint-tablet: 'min-width:' $tablet;                // 768px    sm -> 545px - 768px
$breakpoint-desktop: 'min-width:' $desktop;              // 992px   md -> 769px - 992px
$breakpoint-desktop-large: 'min-width:' $desktop-large;  // 1152px   lg -> 993px - 1152px

// Create some mixins to make writing media queries nicer and more consistent
@mixin mobile {
  @media screen and ($breakpoint-mobile) {
    @content;
  }
}

@mixin tablet {
  @media screen and ($breakpoint-tablet) {
    @content;
  }
}

@mixin desktop {
  @media screen and ($breakpoint-desktop) {
    @content;
  }
}

@mixin desktop-large {
  @media screen and ($breakpoint-desktop-large) {
    @content;
  }
}


.container {
  height: 100vh;
  background: black;
  font-size: $xxl-unit;
  display: flex;
  align-items: center;
  justify-content: center;

  @include mobile {
    background: red;

    &::after {
      content: 'Mobile #{$breakpoint-mobile}';
    }
  }
  
  @include tablet {
    background: green;

    &::after {
      content: 'Tablet #{$breakpoint-tablet}';
    }
  }
  
  @include desktop {
    background: pink;

    &::after {
      content: 'Desktop #{$breakpoint-desktop}';
    }
  }
  
  @include desktop-large {
    background: salmon;

    &::after {
      content: 'Desktop Large #{$breakpoint-desktop-large}';
    }
  }
}