如何在UnoCSS中为特定HTML元素添加默认基础样式？

针对你想用类似Tailwind @layer base 的方式给特定HTML元素设置默认样式的需求，这里有三种可行方案：

方案一：Preflights + UnoCSS设计令牌 #

UnoCSS的Preflights支持原生CSS，但可以直接复用预设中的CSS变量（设计令牌），实现和工具类一致的效果，不需要手写具体数值：

@unocss preflights {
  h1 {
    font-size: var(--un-size-2xl);
    line-height: var(--un-line-height-2xl);
  }
}

var(--un-size-2xl) 这类变量是UnoCSS预设自动生成的，和 text-2xl 工具类对应的值完全一致。

方案二：启用transformer-directives插件支持@apply #

如果习惯Tailwind的@apply写法，可以通过UnoCSS的官方插件实现：

1. 安装插件

npm install @unocss/transformer-directives --save-dev

2. 修改UnoCSS配置文件

import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

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

3. 在Preflights中使用@apply

@unocss preflights {
  h1 {
    @apply text-2xl;
  }
}

方案三：自定义全局规则 #

直接在UnoCSS的配置中添加全局元素规则，和Preflights效果一致：

import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    // 用@apply复用工具类
    ['h1', { '@apply': 'text-2xl' }],
    // 也可以直接写原生CSS属性
    // ['h1', { fontSize: 'var(--un-size-2xl)', lineHeight: 'var(--un-line-height-2xl)' }]
  ],
})

内容的提问来源于stack exchange，提问作者sigmaxf