JSFiddle - React, Tailwind, and code Playground

by meo

SCSS

@mixin gridClasses( $device: false ){
    $deviceString: null;

    @if $device {
        $deviceString: "#{$device}-";
    }
    
    .l-#{$deviceString}one-whole {
        width: 100%;
    }
    .l-#{$deviceString}one-half {
        width: 50%;
    }
    .l-#{$deviceString}one-quarter {
        width: 25%;
    }
    .l-#{$deviceString}three-quarters {
        width: 75%;
    }
    .l-#{$deviceString}one-third {
        width: 33.333%;
    }
    .l-#{$deviceString}two-thirds {
        width: 66.666%;
    }
    .l-#{$deviceString}one-fifth {
        width: 20%;
    }
    .l-#{$deviceString}one-sixth {
        width: 16.666%;
    }
    .l-#{$deviceString}fife-sixths {
        width: 83.333%;
    }
}

@include gridClasses();
@include gridClasses( print );