@unocss/runtime

CSS-in-JS runtime of UnoCSS.

CDN Usage

Add this line to your index.html and play:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

To configure UnoCSS (optional):

<script>
// pass unocss options
window.__unocss = {
  rules: [
    // custom rules...
  ],
  presets: [
    // custom presets...
  ],
  // ...
}
</script>

By default, @unocss/preset-uno will be applied.

The runtime does not come with preflights, if you want to have style resets, you can either add your own, or use one from @unocss/reset:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/normalize.min.css">
<!-- or -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">

CDN Builds

Core

Without any preset:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/core.global.js"></script>

Uno (default)

With @unocss/preset-uno preset:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js"></script>

Attributify

With @unocss/preset-uno and @unocss/preset-attributify presets:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>

Mini

With @unocss/preset-mini and @unocss/preset-attributify preset:

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/mini.global.js"></script>

Bundler Usage

npm i @unocss/runtime

import initUnocssRuntime from '@unocss/runtime'

initUnocssRuntime({ /* options */ })

Preventing flash of unstyled content

Since UnoCSS runs after the DOM is present, there can be a "flash of unstyled content" which may leads the user to see the page as unstyled.

Use un-cloak attribute with CSS rules such as [un-cloak] { display: none } to hide the unstyled element until UnoCSS applies the styles for it.

[un-cloak] {
  display: none;
}

<div class="text-blue-500" un-cloak>
  This text will only be visible in blue color.
</div>

License

MIT License © 2021-PRESENT Anthony Fu