Tailwind style arbitrary css generation - Requires jQuery

arb.js

     const lookup = {
         w:"width",
         h:"height",
         m:"margin",
         mt:"margin-top",
         mb:"margin-bottom",
         ml:"margin-left",
         mr:"margin-right",
         p:"padding",
         pt:"padding-top",
         pb:"padding-bottom",
         pl:"padding-left",
         pr:"padding-right",
         t:"top",
         r:"right",
         b:"bottom",
         l:"left",
         fs:"font-size",
         fw:"font-weight",
         ff:"font-family",
         bg:"background",
         c:"color",
         b:"border",
         bl:"border-left",
         br:"border-right",
         bt:"border-top",
         bb:"border-bottom",
         br:"border-radius",
         d:"display",
         jc:"justify-content",
         ai:"align-items",
         gap:"gap",
         o:"overflow",
         of:"overflow",
         pos:"position",
         z:"z-index",
         aspect:"aspect-ratio",

     }
     $(document).ready(function () {
         console.log('scraping')
         let classes = []
         // grab every element class in the document
         $('*').each(function () {
             // if the element has a class
             if ($(this).attr('class')) {
                 // split the class into an array
                 var classesFound = $(this).attr('class').split(' ');
                 // loop through the array
                 for (var i = 0; i < classesFound.length; i++) {
                     // if the class is not empty
                     if (classesFound[i] != '') {
                         // log the class
                         //console.log(classes[i]);
                         classes.push(classesFound[i])
                     }
                 }
             }
         });
         // remove any classes that do not contain []
         classes = classes.filter(function (el) {
             return el.includes('[');
         });
         // remove any duplicates
         classes = classes.filter(function (item, index) {
             return classes.indexOf(item) >= index;
         });

         var style = document.createElement('style');
         style.type = 'text/css';
         style.innerHTML = '';
         // for each class in classes split out the values from first-[second]
         classes.forEach(function (item) {
             var split = item.split('[');
             var first = split[0].replace(/-$/, '');
             var second = split[1].replaceAll(']', '').replaceAll('[', '').replaceAll('_', ' ');
             //console.log(first, second);
             // lookup the first value in the lookup object
             first = lookup[first] || first;
             //escape item so it is a valid css name
             var newName = item.replaceAll('[', '\\[').replaceAll(']', '\\]').replaceAll('.', '\\.').replaceAll('#', '\\#');
             style.innerHTML += `.${newName} { ${first}: ${second};}\n`;
         });
         document.getElementsByTagName('head')[0].appendChild(style);
     });