DEV Community


Posted on

RunCSS and MithrilJS

RunCSS, A Runtime Version of TailwindCSS and Beyond...awesome.

If you like Tailwind, but don't like it's verbosity like here : Building a table component with Tailwind CSS, look at this :

  <script src=""></script>

<body style="display: none;">

  <div id="table">

    const classTable = {class : "shadow-lg bg-white"};
    const classTR = {class:"bg-red cursor-pointer hover:bg-blue"};
    const classTD = {class : "text-white border px-8 py-4"};
    const classTH = {class : "bg-orange border text-left px-8 py-4"};
    const header =  ["Company", "Contact", "Country"];

    const data = [ 
      ["Alfreds Futterkiste",  "Dante Sparks",  "Italy"],
      ["Centro comercial Moctezuma",  "Neal Garrison", "Spain"], 
      ["Ernst Handel", "Maggie O'Neill",  "Austria"]

    const Table = 
      m("table", classTable, 
            m("tr", => m("th", classTH, c))),
   => m("tr", classTR, => m("td", classTD, c))))

    m.render(table, Table)


  <script type="module">
    import processClasses from '^0/dist/runcss.modern.js'

    for(const element of document.querySelectorAll('*[class]')) {    
    // Display elements = "block"

You can play with it here RunCSSMithril

Top comments (2)

axelrhd profile image

A really nice little example of my favorite Mithril framework. I use Tachyons at the moment and always had problems trying Tailwind with PurgeCSS (all classes where gone because they seem to be not detected in the hyperscripts of Mithril).

I struggle a little with a "real world" project. Could you give an example with multiple Mithril "modules" corresponding with the processClasses function? Do I have to use it in every Mithril-module with view-functions?

Thank you.

artydev profile image

Hy Axel,

Thank you
I did not already try with multiple modules.
But I suppose you have to run it on every exported module ....