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 :
<html>
<head>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<head>
<body style="display: none;">
<div id="table">
</div>
<script>
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("tbody",
m("tr", header.map((c) => m("th", classTH, c))),
data.map(d => m("tr", classTR, d.map((c) => m("td", classTD, c))))
)
)
m.render(table, Table)
</script>
<script type="module">
import processClasses from 'https://unpkg.com/runcss@^0/dist/runcss.modern.js'
for(const element of document.querySelectorAll('*[class]')) {
processClasses(element.className)
}
// Display elements
document.body.style.display = "block"
</script>
</body>
You can play with it here RunCSSMithril
Top comments (2)
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.
Hy Axel,
Thank you
I did not already try with multiple modules.
But I suppose you have to run it on every exported module ....
Regards