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

Question

来自 Tailwind，我可以做这样的事情：

@layer base {
  h1 {
    @apply text-2xl;
  }
}

我正在努力在 Uno 中找到类似的东西。我唯一发现的是预检，但它们只支持原始 CSS，而不支持规则/自定义规则。如何为特定 HTML 元素添加默认基本样式？

Answer 1

我没有使用过 Tailwind，但我在想知道同样的事情时遇到了这个问题。我不相信这是最惯用的方法，我欢迎其他人的建议！

指令转换器让您可以使用语法“@apply”

h1 {
  --uno: text-gray fw-500 ...;
}

我可以使用我在配置中定义的快捷方式。我花了一些时间寻找放置全局样式的适当位置，最终也找到了预检，所以我的配置文件总体看起来像：

import { defineConfig } from "unocss";
import presetUno from "@unocss/preset-uno";
import presetWebFonts from "@unocss/preset-web-fonts";
import transformerDirectives from '@unocss/transformer-directives'

import { colors } from "../ui/constants";

export default defineConfig({
  transformers: [
    transformerDirectives(),
  ],
  presets: [
    presetWebFonts({
      provider: "google",
      fonts: {
        subhead: {
          name: "Josefin Sans",
          weights: [300, 400, 500, 600],
        },
        body: {
          name: "Josefin Slab",
          weights: [300, 400, 500, 600],
        },
        header: "Yeseva One",
      },
    }),
    presetUno(),
  ],
  theme: {
    colors,
  },
  shortcuts: {  // started off adding these classes to all tags...
    "header-text": "text-purple f-s-0 font-header",
    "subhead-text": "f-s-1 font-subhead text-gray fw-400",
    "body-text": "text-darkPurple f-s-3 font-subhead fw-300",
  },
  preflights: [
    {
      getCSS: ({ theme }) => `
        h1 {
          --uno: header-text;
        }

        p {
          --uno: body-text;
        }

        strong {
          --uno: text-purple fw-400;
        }
      `
    }
  ],
  rules: [
    [  // kept this in since it's used above
      /^f-s-(\d+)$/,
      ([_, scale]) => {
        const scales = [3, 2, 1.75, 1.5];
        return {
          "font-size": `${scales[Number(scale)]}rem`,
          "line-height": 1.15,
        };
      },
    ],
    // ...
  ],
});

希望这有帮助！