<p class="text-red-500 p-4">outside (should ignore classes and be unstyled)</p> <div id="app"></div> <script type="module"> import React from "https://esm.sh/preact@10.11.3/compat"; import {html} from "https://esm.sh/htm@3.1.1/preact"; import * as TW from "https://esm.sh/@twind/core@1.0.1"; import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1"; import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1"; const styles = document.createElement("style"); const root = document.querySelector("#app"); const appShadow = root.attachShadow({mode: "open"}); const appShadowRoot = document.createElement("div"); appShadow.append(styles); appShadow.append(appShadowRoot); const inst = TW.twind({presets:[TWPreTail(), TWPreAuto()]}, TW.cssom(styles)); TW.observe(inst, appShadowRoot); const El =()=> { const [StateGet, StateSet] = React.useState(false); return html` <div class=${StateGet ? "text-white bg-black": "text-red"} onClick=${e=>StateSet(!StateGet)}> click </div> `; } React.render(html` <p class="text(yellow-500 lg) p-4 font(sans black)"> inside (should be styled) <${El}/> </p>`, appShadowRoot); </script>