twcss
Version:
Fast minimalist utility-first CSS runtime inspired by Tailwind and Twind
45 lines (40 loc) • 1.25 kB
HTML
<html lang="en">
<head>
<title>TWCSS test page</title>
<script>
class InnerElement extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
this.shadowRoot.innerHTML = `
<div tw="p-4 bg-fuchsia-300 border-2 rounded-md w-[300px]">
Shadow DOM: inner-element
</div>
`
}
}
class OuterElement extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
this.shadowRoot.innerHTML = `
<div tw="bg-blue-300 p-4 rounded-md border-2 space-y-4">
<div>Shadow DOM: outer-element</div>
<inner-element tw="block"></inner-element>
</div>
`
}
}
customElements.define('inner-element', InnerElement)
customElements.define('outer-element', OuterElement)
</script>
<script src="main.js"></script>
</head>
<body tw="font-sans p-4 space-y-4">
<h1 tw="text-2xl after:content-[':after'] after:block before:content-[':before'] before:block">
Welcome to TWCSS!
</h1>
<outer-element tw="block"></outer-element>
</body>
</html>