JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<div class="container">
    <div class="columns">
        <div>1</div>
        <div>2</div>
    </div>
</div>

SCSS

// Container Widths
//
// Define container widths, these will be applied to the
// .container element. Values must be ascending.

$container-widths: (
        mobile: 360px,
        mobile--large: 480px,
        tablet: 720px,
        tablet--large: 960px,
        desktop: 1160px,
);

// Device break-points
//
// Define device break-points. Must start with a breakpoint of 0 &
// values must be ascending.

$grid-breakpoints: (
        reset: 0,
        mobile: 424px,
        mobile--large: 544px,
        tablet: 784px,
        tablet--large: 1024px,
        desktop: 1200px,
);

// Columns
//
// Specify amount of columns and the size of the gap.
$columns: 12;
$column-gap: 2rem;

// Minimum device breakpoint width. Smallest breakpoint will be a null value

@function device-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);

  @return if(0 != $min, $min, null);
}

// Maximum device breakpoint width. Largest breakpoint will be a null value

@function device-max($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $next: if(index($breakpoint-names, $name) < length($breakpoint-names),
          nth($breakpoint-names,
                  index($breakpoint-names, $name) + 1), null);

  @return if($next, device-min($next, $breakpoints) - .02px, null);
}

// Device breakpoint up. If the breakpoint is the smallest it will
// return without media query.
@mixin device-up($name, $breakpoints: $grid-breakpoints) {
  $min: device-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}


// Device breakpoint down. If the breakpoint is the largest it will return without media query.
@mixin device-down($name, $breakpoints: $grid-breakpoints) {
  $max: device-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

// Device breakpoint between
@mixin device-between($lower, $upper,...