windicss-runtime-dom
Enables Windi CSS for any site with one-line code without any build tools - Windi CSS on the browser runtime.
<script src="https://unpkg.com/windicss-runtime-dom"></script>And start playing!
Idea credit to @alexanderniebuhr
Prevent FOUC
To prevent FOUC (flash of unstyled content), you can update the following line to your <body> tag.
<body class="block" hidden>Configurations
<script>
window.windicssRuntimeOptions = {
// enabled preflight
preflight: true,
// scan the entire dom tree to infer the classnames on page loaded
extractInitial: true,
// generate mock classes for browser to do the auto-completeion
mockClasses: false,
// the windi config you are used to put in `windi.config.js`
config: {}
}
</script>
<script src="https://unpkg.com/windicss-runtime-dom"></script>Refer to src/index.ts for more details.
Notes
This is an Experimental project what ships the Windi CSS compiler to the client-side. It utilizes MutationObserver to watch the changes for the entire dom, and injects the style to the <head>. This might have a certain impact on the client-side performance, please consider using build tools instead of this if the production performance is something you need to consider. That said, it still works great and out-of-box for the scenarios that you want to focus more on content and styling without complex setups.
And for a faster/lighter solution, you may want to check out twind/shim.
Sponsors
License
MIT License © 2021 Anthony Fu