JSFiddle - React, Tailwind, and code Playground

by ainop

HTML

<div class="wrap debug">
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
        <div class="col-md-1"></div>
    </div>

    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11"></div>
    </div>

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-10"></div>
    </div>

    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
    </div>

    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-8"></div>
    </div>

    <div class="row">
        <div class="col-md-5"></div>
        <div class="col-md-7"></div>
    </div>

    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>

    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-3"></div>
                <div class="col-md-3"></div>
            </div>
        </div>
    </div>
</div>

SCSS

$column: 50px;
$gutter: 30px;

.wrap {
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@mixin media-min-width($min-width) {
    @if $min-width == null {
        @content;     
    } @else {
        @media (min-width: $min-width) {
            @content;
        }
    }
}

%col {
    &:before {
        display: block;
        text-align: center;
        background: #cfc;
    }
}

@include media-min-width(640px) {
    @for $i from 1 through 4 {
        .col-xs-#{$i} {
            width: $i * ($column + $gutter) - $gutter;
        }
    }
}

@each $size, $cols, $min-width  in (xs, 4, null), (sm, 8, 640px), (md, 12, 1024px) {
    @include media-min-width($min-width) {
        .wrap {
            width: $cols * ($column + $gutter) - $gutter;
        }

        @for $i from 1 through $cols {
            .col-#{$size}-#{$i} {
                width: if($size != xs, $i * ($column + $gutter) - $gutter, ($i * 100% / $cols));
            }
        }
        
        @for $i from 1 through $cols {
            .offset-#{$size}-#{$i} {
                margin-left: if($size != xs, $i * ($column + $gutter), ($i * 100% / $cols));
            }
        }
    }
}