UnoCSS Options

We have integrated UnoCSS by default with the following presets.

Therefore, you can quickly achieve various effects directly in Markdown.

See UnoCSS | Markdown.

unocss ​

您可以在主题 theme 目录的 uno.config.ts 或 unocss.config.ts 文件中编写 UnoCSS 配置。

uno.config.ts
ts
import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: [
    [
      'custom-uno-btn',
      'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer !outline-none hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'
    ],
  ],
  safelist: ['bg-red-500'],
})

You can write UnoCSS configurations in the uno.config.ts or unocss.config.ts files within the theme directory. Alternatively, you can configure it in the unocss property of the valaxy.config.ts file. Below is an example of the unocss configuration in valaxy.config.ts:

valaxy.config.ts
ts
import { presetIcons } from 'unocss'

export default defineValaxyConfig<ThemeConfig>({
  unocss: {
    shortcuts: [
      {
        'bg-base': 'bg-white dark:bg-black',
        'color-base': 'text-black dark:text-white',
        'border-base': 'border-[#8884]',
      },
    ],
    rules: [
      ['theme-text', { color: '#4b4b4b' }],
    ],
  },
})

Directly configuring presets in the unocss option will override the default presets of the theme and Valaxy. To extend these presets, use unocssPresets.

valaxy.config.ts
ts
import { presetIcons } from 'unocss'

export default defineValaxyConfig<ThemeConfig>({
  unocss: {
    presets: [
      presetIcons({
        extraProperties: {
          'display': 'inline-block',
          'height': '1.2em',
          'width': '1.2em',
          'vertical-align': 'text-bottom',
        },
      }),
    ],
  },
})

TIP

Configuring presets in the uno.config.ts or unocss.config.ts files will also override the default presets of Valaxy or the theme. To extend the presets, use unocssPresets.

unocssPresets ​

To extend the UnoCSS presets in Valaxy, here is a basic example:

valaxy.config.ts
ts
import { presetIcons } from 'unocss'

export default defineValaxyConfig<ThemeConfig>({
  unocssPresets: {
    icons: {
      extraProperties: {
        'display': 'inline-block',
        'height': '1.2em',
        'width': '1.2em',
        'vertical-align': 'text-bottom',
      },
    },
  },
})

DANGER

以下方式是错误的写法，注意 unocssPresets 和 unocss 配置项之间的区别

The following method is incorrect. Note the difference between the unocssPresets and unocss configuration options:

valaxy.config.ts
ts
import { presetIcons } from 'unocss'

export default defineValaxyConfig<ThemeConfig>({
  unocssPresets: {
    // ❌ This won't work
    icons: presetIcons({ 
      extraProperties: {
        'display': 'inline-block',
        'height': '1.2em',
        'width': '1.2em',
        'vertical-align': 'text-bottom',
      },
    }),
  },
})

FAQ ​

About UnoCSS Hot Reloading Failure ​

Currently, due to the inability to access UnoCSS’s ctx, we have not yet found a good method to implement hot reload. #48

To Be Continued.

Contributors

Edit this page on GitHub

Last updated: