Duplicate Snippet
Embed Snippet on Your Site
theme setup unocss assets
UnoCSS runtime provide a CDN build that runs the UnoCSS right in the browser. It will detect the DOM changes and generate the styles on the fly.
php | |
| <?php
|
| if ( ! function_exists( 'theme_setup_unocss_assets' ) ) :
|
| function theme_setup_unocss_assets() {
|
| wp_enqueue_style(
|
| 'unocss-reset',
|
| 'https://unpkg.com/@unocss/reset/tailwind.css',
|
| array(),
|
| null
|
| );
|
| wp_enqueue_script(
|
| 'unocss-preset-uno',
|
| 'https://unpkg.com/@unocss/runtime/uno.global.js',
|
| array(),
|
| null,
|
| true
|
| );
|
| wp_enqueue_script(
|
| 'unocss-preset-icons',
|
| 'https://unpkg.com/@unocss/runtime/preset-icons.global.js',
|
| array(),
|
| null,
|
| true
|
| );
|
| wp_add_inline_script(
|
| 'unocss-preset-icons',
|
| 'window.__unocss = {
|
| presets: [
|
| () => window.__unocss_runtime.presets.presetIcons({
|
| scale: 1.2,
|
| cdn: "https://esm.sh/"
|
| }),
|
| ],
|
| }',
|
| );
|
| wp_enqueue_script(
|
| 'unocss-preset-core',
|
| 'https://unpkg.com/@unocss/runtime/core.global.js',
|
| array('unocss-preset-icons'),
|
| null,
|
| true
|
| );
|
| }
|
| endif;
|
|
|
| add_action( 'wp_enqueue_scripts', 'theme_setup_unocss_assets' );
|
| |
| |
Comments