unocss

UnoCSS 是一個即時原子化 CSS 引擎，設計上靈活且可擴展。核心是無意見的——所有 CSS 工具都透過預設集提供。它是 Tailwind CSS 的超集，因此您可以重複使用 Tailwind 的知識來處理基本語法。

重要： 在撰寫 UnoCSS 程式碼之前，代理應檢查專案根目錄中是否有 uno.config.* 或 unocss.config.* 檔案，以了解可用的預設集、規則和快捷方式。如果專案設定不明確，請避免使用 attributify 模式和其他進階功能——堅持使用基本的 class 用法。

此技能基於 UnoCSS 66.x，生成於 2026-01-28。

核心

主題	說明	參考
設定	設定檔設定與所有設定選項	core-config
規則	用於產生 CSS 工具的靜態與動態規則	core-rules
快捷方式	將多個規則組合成單一簡寫	core-shortcuts
主題	用於顏色、斷點和設計權杖的主題系統	core-theme
變體	對規則套用 hover:、dark:、響應式等變化	core-variants
提取	UnoCSS 如何從原始碼中提取工具	core-extracting
安全清單與封鎖清單	強制包含或排除特定工具	core-safelist
圖層與預設樣式	CSS 圖層排序與原始 CSS 注入	core-layers

預設集

主要預設集

主題	說明	參考
Preset Wind3	與 Tailwind CSS v3 / Windi CSS 相容的預設集（最常見）	preset-wind3
Preset Wind4	與 Tailwind CSS v4 相容的預設集，具備現代 CSS 功能	preset-wind4
Preset Mini	最小預設集，包含自訂建置所需的基本工具	preset-mini

功能預設集

主題	說明	參考
Preset Icons	使用 Iconify 的純 CSS 圖示，支援任何圖示集	preset-icons
Preset Attributify	將工具分組到 HTML 屬性中，而非 class	preset-attributify
Preset Typography	用於排版預設值的 Prose 類別	preset-typography
Preset Web Fonts	輕鬆整合 Google Fonts 與其他網路字型	preset-web-fonts
Preset Tagify	將工具用作 HTML 標籤名稱	preset-tagify
Preset Rem to Px	將工具的 rem 單位轉換為 px	preset-rem-to-px

轉換器

主題	說明	參考
Variant Group	將具有共同前綴的工具分組的簡寫	transformer-variant-group
Directives	CSS 指令：@apply、@screen、theme()、icon()	transformer-directives
Compile Class	將多個類別編譯成一個雜湊類別	transformer-compile-class
Attributify JSX	在 JSX/TSX 中支援無值的 attributify	transformer-attributify-jsx

整合

主題	說明	參考
Vite 整合	在 Vite 中設定 UnoCSS 及框架特定提示	integrations-vite
Nuxt 整合	用於 Nuxt 應用程式的 UnoCSS 模組	integrations-nuxt