今天介紹最後三個使用機會較低的 UnoCSS 官方 Presets，其他的社群貢獻 Presets 可以在 官方 Github 查看，有的可以支援 gradient, scrollbar...等特殊樣式、有些可以把其他 css 框架的擴充套件移植過來（例如：Flowbite、TailwindForms）。

Preset-typography

前面介紹 Content 這個 Nuxt 的 CMS 套件時有提到 prose 這個單詞，表示使用 Markdown 這類語法對應的HTML 基礎標籤，preset-typography 就是用來設定這些基礎標籤樣式的擴充功能。

安裝

npm i -D @unocss/preset-typography

設定

修改 UnoCSS 的 config，加入 preset-typography

import { defineConfig, presetTypography, presetUno } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(), // required
    presetTypography(),
  ],
})

使用

會套用到 markdown 的標籤加上 prose 的 class name，例外的內容加上 not-prose。

<article class="text-base prose prose-truegray xl:text-xl">
  {{ markdown }}
  <p class="not-prose">
    some text
  </p>
</article>

樣式調整

• 顏色：使用 prose-${colorName} 更換顏色。
• 黑暗模式：加上 prose dark:prose-invert 即可。
• 文字大小：使用一般文字的 text-${size} 即可。

Preset-tagify

preset-tagify是把 class name 直接當做 tag name 來使用，適用一些樣式簡單明確的情形，例如警告文字可以使用 <text-red>Warning</text-red>，實用性普通。

安裝

npm i -D @unocss/preset-tagify

設定

修改 UnoCSS 的 config，加入 preset-tagify

import presetTagify from '@unocss/preset-tagify'

Unocss({
  presets: [
    presetTagify({ /* options */ }),
    // ...other presets
  ],
})

使用方式

如同前面的說明，就是把單一個 class name 直接當成 tag name 來撰寫，官方範例如下：

• 原始寫法

<span class="text-red"> red text </span>
<div class="flex"> flexbox </div>
I'm feeling <span class="i-line-md-emoji-grin"></span> today!

• 改成 tag 寫法

<text-red> red text </text-red>
<flex> flexbox </flex>
I'm feeling <i-line-md-emoji-grin /> today!

Preset-rem-to-px

顧名思義，把所有 rem 值自動換算成固定的 px 值，一般狀況下不太會用到。

安裝

npm i -D @unocss/preset-rem-to-px

設定

修改 UnoCSS 的 config，加入 preset-rem-to-px

import presetUno from '@unocss/preset-uno'
import presetRemToPx from '@unocss/preset-rem-to-px'

Unocss({
  presets: [
    presetUno(),
    presetRemToPx()
  ],
})

使用方式

沒有什麼特別的使用法，只要是帶有尺寸數值的 class name 都會自動計算成 px 值，例如：

• 原始值

.m-2 {
  margin: 0.5rem;
}

• 計算後

.m-2 {
  margin: 8px;
}