安装Nuxt模块

pnpm add -D @unocss/nuxt

添加 @unocss/nuxt 到你的 Nuxt 配置文件:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@unocss/nuxt',
  ],
})

创建 uno.config.ts 文件:

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

export default defineConfig({
  // ...UnoCSS options
})

unno.css条目会被模块自动注入。

Configuration 配置

使用专用的 uno.config.ts 文件进行配置。有关更多详细信息，请参阅配置文件open in new window

浏览器风格重置

你也可以使用unocss提供的reset插件，重置浏览器默认样式。

pnpm add @unocss/reset

使用

//nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@unocss/reset/tailwind-compat.css'
  ]
})

你还可以使用其他预设open in new window

Transformers

Directives transformer

@apply 、 @screen 和 theme() 指令的 UnoCSS 转换器： @unocss/transformer-directives

pnpm add -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

使用

.custom-div {
  @apply text-center my-0 font-medium;
}

/*通过名称引用断点的媒体查询*/
.grid {
  --uno: grid grid-cols-2;
}
@screen xs {
  .grid {
    --uno: grid-cols-1;
  }
}
@screen sm {
  .grid {
    --uno: grid-cols-3;
  }
}

更多使用方法请参考文档open in new window

Variant group transformer

启用变体组功能

pnpm add -D @unocss/transformer-variant-group

import { defineConfig } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'

export default defineConfig({
  // ...
  transformers: [
    transformerVariantGroup(),
  ],
})

使用

<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

图标预设

安装

pnpm add -D @unocss/preset-icons @iconify-json/[the-collection-you-want]

the-collection-you-want 为你需要的图标集合，例如：@iconify-json/formkit

👉 所有可用的图标open in new window

// uno.config.ts
import { defineConfig, presetUno } from 'unocss'
import presetIcons from '@unocss/preset-icons'

export default defineConfig({
  presets: [
    presetUno(), // 注意需要把此处加上，不然会导致样式丢失
    presetIcons({ /* options */ }),
  ],
})

更多配置参见文档open in new window

使用

<i class='i-formkit-facebook inline-block'></i>
<i class='i-formkit-github inline-block'></i>
<i class='i-formkit-tiktok inline-block'></i>
<i class='i-formkit-twitter inline-block'></i>