JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<ul id="holder">
    <li>Tab 1 f</li>
    <li>Tab 2 ghe</li>
    <li>Tab 3 fds</li>
    <li>Tab 4 wr</li>
    <li>Tab 5 wer3</li>
    <li>Tab 6 3r</li>
<ul>

CSS

ul { list-style: none; padding: 0px; margin: 0px; }
li { display: inline-block; min-width: 100px; border: 1px solid #d4d4d4; }

JavaScript

width = null

$(document).ready(function() {
    $("li").each(function(idx, li) {
        width += $(li).width()
    });

});

document.querySelector('style').textContent +=
     "@media screen and (max-width:" + width + "px) { #holder { background-color: red; }}"