windicss-runtime-dom

Enables Windi CSS for any site with one-line code without any build tools - Windi CSS on the browser runtime

Usage no npm install needed!

<script type="module">
  import windicssRuntimeDom from 'https://cdn.skypack.dev/windicss-runtime-dom';
</script>

README

windicss-runtime-dom

NPM version npm bundle size

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