UnoCSS

UnoCSS is an Instant On-demand Atomic CSS Engine, similar to Tailwind CSS.

If you used the CLI method to install Minze you can extend your environment with UnoCSS quite quickly by adding unocss npm package.

The following guide is based on a fresh Minze CLI installation.

Install dependencies.

npmyarnpnpmbun

bash

$ npm add -D unocss @unocss/postcss

bash

$ yarn add -D unocss @unocss/postcss

bash

$ pnpm add -D unocss @unocss/postcss

bash

$ bun add -D unocss @unocss/postcss

Setup files. This will allow you to use UnoCSS in the entire project (components, css files, as well as preview templates).

Create and populate uno.css, postcss.config.cjs and uno.config.js files.
Import the uno.css file into vite.js.
Add UnoCSS Vite plugin, with the shadow-dom mode enabled, to your vite.config.js file.

txt

├─ src/
|  ├─ assets/
|  |  ├─ uno.css
|  |  └─ vite.css
|  ├─ ...
|  └─ vite.js
├─ ...
├─ postcss.config.cjs
├─ uno.config.js
└─ vite.config.js

css

@unocss all;

module.exports = {
  plugins: {
    '@unocss/postcss': {}
  }
}

import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  theme: {},
  presets: [presetUno({ dark: 'media' })]
})

import './assets/uno.css'
import './assets/vite.css'
// ...

import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'
import minze from 'vite-plugin-minze'

export default defineConfig({
  resolve: {
    alias: { '@': new URL('./src', import.meta.url).pathname }
  },
  plugins: [
    UnoCSS({ mode: 'shadow-dom' }),
    minze()
  ]
})

Create my-button.css file and populate it's contents.

filesmy-button.css

txt

src/
└─ lib/
   ├─ ...
   ├─ my-button.css
   └─ my-button.js

css

button {
  @apply w-full sm:w-auto text-base font-bold rounded transition duration-100 px-4 py-3;

  color: var(--button-color, theme('colors.white'));
  background: var(--button-bg, theme('colors.sky.400'));

  &:hover {
    background: var(--button-bg-hover, theme('colors.sky.500'));
  }
}

Import the CSS file as ?inline and replace the css block with @unocss-placeholder ${css}. This block will be augmented with compiled CSS during processing.

src/lib/my-button.js

import { MinzeElement } from 'minze'
import css from './my-button.css?inline'

export class MyButton extends MinzeElement {
  html = () => `
    <button class="border-2 border-sky-500">
      <slot></slot>
    </button>
  `

  css = () => `@unocss-placeholder ${css};`
}

TIP

For more details about UnoCSS and web components refer to the UnoCSS documentation.

UnoCSS ​

UnoCSS