JSPM

@unocss/runtime

0.28.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5410
  • Score
    100M100P100Q128249F
  • License MIT

CSS-in-JS Runtime for UnoCSS

Package Exports

  • @unocss/runtime

Readme

@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 */ })

License

MIT License © 2021 Anthony Fu