JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.0/less.min.js  Copy"></script>

CSS

.margin (@label, @size: 1, @key:1) when (@size =< 30){
    .m-@{key} {
        margin: @size !important;
    }
    
    .m-t-@{key} {
        margin-top: @size !important;
    }
    
    .m-b-@{key} {
        margin-bottom: @size !important;
    }
    
    .m-l-@{key} {
        margin-left: @size !important;
    }
    
    .m-r-@{key} {
        margin-right: @size !important;
    }
    
    .margin(@label - 5; @size + 5; @key + 5);
}