JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="container">
  <div class="grid">
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>
    <div class="col --col-1" data-col="col-1"></div>

    <div class="col --col-2" data-col="col-2"></div>
    <div class="col --col-2" data-col="col-2"></div>
    <div class="col --col-2" data-col="col-2"></div>
    <div class="col --col-2" data-col="col-2"></div>
    <div class="col --col-2" data-col="col-2"></div>
    <div class="col --col-2" data-col="col-2"></div>
    
    <div class="col --col-3" data-col="col-3"></div>
    <div class="col --col-3" data-col="col-3"></div>
    <div class="col --col-3" data-col="col-3"></div>
    <div class="col --col-3" data-col="col-3"></div>
    
    <div class="col --col-4" data-col="col-4"></div>
    <div class="col --col-4" data-col="col-4"></div>
    <div class="col --col-4" data-col="col-4"></div>
    
    <div class="col --col-3" data-col="col-3"></div>
    <div class="col --col-3" data-col="col-3"></div>
    <div class="col --col-3" data-col="col-3"></div>
    <div class="col --col-3" data-col="col-3"></div>
    
    <div class="col --col-4" data-col="col-4"></div>
    <div class="col --col-4" data-col="col-4"></div>
    <div class="col --col-4" data-col="col-4"></div>
    
    <div class="col --col-5" data-col="col-5"></div>
    <div class="col --col-5" data-col="col-5"></div>
    <div class="col --col-2" data-col="col-2"></div>
    
    <div class="col --col-6" data-col="col-6"></div>
    <div...

SCSS

// VARIABLES

// SIZES
$xxs-unit: 0.25rem;
$xs-unit: 0.5rem;
$sm-unit: 0.75rem;
$base-unit: 0.875rem;
$md-unit: 1rem;
$lg-unit: 1.5rem;
$xl-unit: 2rem;
$xxl-unit: 3rem;

// GRID
$grid-space: 0.9375rem;
$g-small: 34rem;
$g-medium: 48rem;
$g-large: 62rem;
$g-extra-large: 78.125rem;


$columns: 12;
$screenSizes: (
    mobile: sm,
    tablet: md,
    desktop: lg
);

// MIXINS
@mixin component($block) {
    .#{$block} {
        @content;
    }
}

@mixin part($element) {
    &__#{$element} {
        @content;
    }
}

@mixin option($mod) {
    &.--#{$mod} {
        @content;
    }
}

@mixin mobile {
    @media screen and (min-width: #{$g-small}) {
        @content;
    }
}

@mixin tablet {
    @media screen and (min-width: #{$g-medium}) {
        @content;
    }
}

@mixin desktop {
    @media screen and (min-width: #{$g-large}) {
        @content;
    }
}

@mixin utility($item) {
    #body .\+#{$item} {
        @content;
    }
}


@include component(container) {
    margin-left: auto;
    margin-right: auto;
    max-width: $g-extra-large;
    padding-left: $grid-space;
    padding-right: $grid-space;

    @include option(large) {
        max-width: $g-medium;
    }

    @include option(medium) {
        max-width: $g-medium;
    }

    @include option(small) {
        max-width: $g-small;
    }

    @include option(fluid) {
        max-width: 100%;
    }
}

@include component(grid) {
    display: grid;
    grid-gap: $grid-space;
    grid-template-columns: repeat(12, minmax(0, 1fr));

    @include option(no-gap) {
        grid-gap: 0;
    }

    @include option(column-gap-only) {
        column-gap: $grid-space;
        row-gap: 0;
    }

    @include option(row-gap-only) {
        column-gap: 0;
        row-gap: $grid-space;
    }
}

@include component(col) {
    position: relative;

    @include option(col-hidden-sm) {
        @media screen and (max-width: $g-small) {
            display: none !important;
        }
    }

    @include option(col-hidden-md) {
       ...