UnoCSS文档预设：预设功能文档说明

UnoCSS文档预设：预设功能文档说明

【免费下载链接】unocss The instant on-demand atomic CSS engine. 项目地址: https://gitcode.com/GitHub_Trending/un/unocss

概述

UnoCSS是一个即时按需的原子CSS引擎，其核心设计理念是完全可定制化。与传统的CSS框架不同，UnoCSS本身不提供任何核心工具类，所有功能都通过预设（Presets）来实现。这种设计使得开发者可以根据项目需求灵活选择和组合不同的预设功能。

预设分类与功能详解

核心预设

1. @unocss/preset-mini

最小但必需的规则和变体

// 配置示例
import { defineConfig, presetMini } from 'unocss'

export default defineConfig({
  presets: [
    presetMini()
  ]
})

功能特性：

• 提供基础的CSS工具类
• 包含必要的变体（Variants）支持
• 轻量级核心功能

2. @unocss/preset-wind3 / @unocss/preset-wind4

Tailwind/Windi CSS兼容预设

import { defineConfig, presetWind } from 'unocss'

export default defineConfig({
  presets: [
    presetWind() // 自动选择最新版本
  ]
})

版本对比：

特性	preset-wind3	preset-wind4
兼容性	Tailwind v3	Tailwind v4
文件大小	较小	优化后更小
功能特性	基础功能	增强功能

功能增强预设

3. @unocss/preset-attributify

属性化模式支持

<!-- 传统方式 -->
<div class="bg-blue-500 text-white p-4 rounded"></div>

<!-- 属性化模式 -->
<div bg="blue-500" text="white" p="4" rounded></div>

配置示例：

import { defineConfig, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify()
  ]
})

4. @unocss/preset-icons

纯CSS图标解决方案

import { defineConfig, presetIcons } from 'unocss'

export default defineConfig({
  presets: [
    presetIcons({
      scale: 1.2,
      extraProperties: {
        'display': 'inline-block'
      }
    })
  ]
})

使用示例：

<!-- 使用Iconify图标 -->
<span class="i-mdi-home text-2xl"></span>
<span class="i-carbon-settings text-blue-500"></span>

5. @unocss/preset-typography

排版预设

import { defineConfig, presetTypography } from 'unocss'

export default defineConfig({
  presets: [
    presetTypography()
  ]
})

排版类示例：

.prose {
  /* 自动应用排版样式 */
}

转换器预设

6. @unocss/transformer-variant-group

变体组转换器

import { defineConfig, transformerVariantGroup } from 'unocss'

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

转换示例：

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

<!-- 转换后 -->
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono" />

7. @unocss/transformer-directives

CSS指令转换器

import { defineConfig, transformerDirectives } from 'unocss'

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

使用示例：

.custom-component {
  @apply bg-blue-500 text-white p-4 rounded;
  
  &:hover {
    @apply bg-blue-700;
  }
}

8. @unocss/transformer-compile-class

类编译转换器

import { defineConfig, transformerCompileClass } from 'unocss'

export default defineConfig({
  transformers: [
    transformerCompileClass()
  ]
})

功能说明：

• 将多个工具类编译为单个类
• 减少HTML中的类名数量
• 优化最终输出大小

提取器预设

9. @unocss/extractor-svelte

Svelte文件提取器

import { defineConfig, extractorSvelte } from 'unocss'

export default defineConfig({
  extractors: [
    extractorSvelte()
  ]
})

10. @unocss/extractor-pug

Pug模板提取器

import { defineConfig, extractorPug } from 'unocss'

export default defineConfig({
  extractors: [
    extractorPug()
  ]
})

工具类预设

11. @unocss/preset-web-fonts

网页字体支持

import { defineConfig, presetWebFonts } from 'unocss'

export default defineConfig({
  presets: [
    presetWebFonts({
      provider: 'google',
      fonts: {
        sans: 'Roboto',
        mono: ['Fira Code', 'Fira Mono:400,700'],
      }
    })
  ]
})

12. @unocss/preset-rem-to-px

REM到PX转换

import { defineConfig, presetRemToPx } from 'unocss'

export default defineConfig({
  presets: [
    presetRemToPx()
  ]
})

预设组合策略

基础组合方案

import { defineConfig, presetUno } from 'unocss'

// 最简单的配置
export default defineConfig({
  presets: [presetUno()]
})

高级组合方案

import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
import transformerVariantGroup from '@unocss/transformer-variant-group'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons()
  ],
  transformers: [
    transformerVariantGroup(),
    transformerDirectives()
  ]
})

性能优化建议

1. 按需引入预设

// 只引入需要的预设
export default defineConfig({
  presets: [
    presetMini(), // 核心功能
    presetIcons() // 按需添加图标
  ]
})

2. 生产环境优化

export default defineConfig({
  // 开发环境详细配置
  safelist: process.env.NODE_ENV === 'development' ? [] : undefined,
  
  presets: [
    presetUno()
  ]
})

常见问题解答

Q: 预设之间是否存在冲突？

A: UnoCSS的预设设计为可组合使用，大多数预设可以安全地一起使用。

Q: 如何自定义预设？

A: 所有预设都接受配置选项，可以通过传递配置对象来自定义行为。

Q: 预设的加载顺序是否重要？

A: 是的，后加载的预设会覆盖先加载的预设的相同规则。

总结

UnoCSS的预设系统提供了极大的灵活性，开发者可以根据项目需求选择合适的预设组合。通过理解每个预设的功能和适用场景，可以构建出高效、定制化的CSS解决方案。

通过合理配置这些预设，UnoCSS能够适应各种复杂的项目需求，提供高效、灵活的CSS解决方案。

【免费下载链接】unocss The instant on-demand atomic CSS engine. 项目地址: https://gitcode.com/GitHub_Trending/un/unocss