JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
<div class="cf rows">
    <div class="dynamic-4-15">4/15th width</div>
    <div class="dynamic-7-15">7/15th width</div>
</div>

CSS

/* The total number of columns you wish to use */
    @columns: 15;
    /* 
        We loop through and for each create class
       .dynamic-<index>-<columns> 
    */
     .looping (@index) when (@index > 0) {
        (~".dynamic-@{index}-@{columns}") {
            width: percentage(@index/@columns);
        }
        .looping(@index - 1);
    }
    /* Stop and do nothing at 0 */
    .looping (0) {}
    /* Call our function */
    .looping (@columns);
    
     .cf:before, .cf:after {
        content:" ";
        display: table;
    }
    .cf:after {
        clear:both;
    }
    .rows > div {
        color:#FFF;
        background:#0000FF;
        float:left;
        padding:20px;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }
    .rows > div:first-child {
        background:#FF0000;
    }

JavaScript

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');

// Step 2: Tell LESS to refresh the styles
less.refreshStyles();