这是一个按需原子化 CSS 引擎,比起直接使用 TailwindCSS 更轻更快!
它的预设样式可以直接使用 TailwindCSS 和 Windicss 的样式。
yarn add unocss @unocss/nuxt //^66.5.2
//1. 配置模块,nuxt.config.ts:
modules: [
'@unocss/nuxt',
],
//2. 根目录创建 uno.config.ts
import {
defineConfig, presetAttributify, presetIcons,
presetTypography, presetUno, presetWebFonts,
transformerDirectives, transformerVariantGroup
} from 'unocss'
export default defineConfig({
rules: [
//...
],
shortcuts: [
// ...
],
theme: {
colors: {
// ...
}
},
presets: [
presetUno(), //工具类预设
presetAttributify(), //属性化模式支持
presetIcons(), //icon支持
presetTypography(),
presetWebFonts({
fonts: {
// ...
},
}),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
],
})
RE: Nuxt开发指南