{
  "url": "https://unifast.dev/zh-CN/docs/packages/node/add-classes/",
  "locale": "zh-CN",
  "title": "addClasses()",
  "description": "为匹配 CSS 选择器的元素添加 CSS 类名。",
  "section": "packages",
  "body": "```ts\nimport { addClasses } from \"@unifast/node\";\n```\n\n## 签名\n\n```ts\nfunction addClasses(rules: Record<string, string>): UnifastPlugin\n```\n\n## 参数\n\n### rules\n\n一个 `Record<string, string>`，其中键为 CSS 选择器，值为用空格分隔的类名，将被添加到匹配的元素上。新增的类名会与元素上已有的类名合并。\n\n### 支持的选择器\n\n支持 CSS Selectors Level 4 的大部分子集，包括：\n\n- **标签选择器**：`h1`、`p`、`table`\n- **类选择器**：`.info`、`.alert.warning`\n- **ID 选择器**：`#main`\n- **通用选择器**：`*`\n- **属性选择器**：`[data-type]`、`[href^=\"https\"]`、`[href$=\".pdf\"]`、`[href*=\"example\"]`、`[class~=\"bar\"]`、`[lang|=\"en\"]`\n- **组合器**：后代（` `）、子元素（`>`）、相邻兄弟（`+`）、通用兄弟（`~`）\n- **伪类**：`:first-child`、`:last-child`、`:nth-child()`、`:not()`、`:empty`\n- **逗号分隔的选择器**：`h1, h2, h3`\n- **复合选择器**：`div.alert#main[data-type=\"warning\"]`\n\n## 用法\n\n```ts\nimport { compile, addClasses } from \"@unifast/node\";\n\nconst md = `\n# Hello World\n\nSome paragraph text.\n\n| Name | Value |\n|------|-------|\n| A    | 1     |\n`;\n\nconst result = compile(md, {\n  plugins: [\n    addClasses({\n      h1: \"text-3xl font-bold\",\n      p: \"leading-relaxed\",\n      table: \"border-collapse w-full\",\n    }),\n  ],\n});\n\n// <h1 class=\"text-3xl font-bold\">Hello World</h1>\n// <p class=\"leading-relaxed\">Some paragraph text.</p>\n// <table class=\"border-collapse w-full\">...</table>\n```\n\n## 示例\n\n### 逗号分隔的选择器\n\n把相同的类名一次性应用到多种元素上：\n\n```ts\nimport { compile, addClasses } from \"@unifast/node\";\n\nconst result = compile(md, {\n  plugins: [\n    addClasses({\n      \"h1, h2, h3\": \"font-bold tracking-tight\",\n    }),\n  ],\n});\n```\n\n### 复杂选择器\n\n使用组合器和伪类实现精确的目标选择：\n\n```ts\nimport { compile, addClasses } from \"@unifast/node\";\n\nconst result = compile(md, {\n  plugins: [\n    addClasses({\n      \"pre > code\": \"block overflow-x-auto\",\n      \"ul > li:first-child\": \"mt-0\",\n      \"ul > li:last-child\": \"mb-0\",\n      \"a[href^=\\\"https\\\"]\": \"external-link\",\n      \"div:not(.alert)\": \"default-container\",\n    }),\n  ],\n});\n```\n\n### Tailwind CSS 工具类\n\n一种常见的用法是使用 `addClasses` 为 Markdown 生成的 HTML 应用 Tailwind 工具类：\n\n```ts\nimport { compile, addClasses } from \"@unifast/node\";\n\nconst result = compile(md, {\n  plugins: [\n    addClasses({\n      h1: \"text-4xl font-extrabold text-gray-900 mb-8\",\n      h2: \"text-2xl font-bold text-gray-800 mt-12 mb-4\",\n      h3: \"text-xl font-semibold text-gray-700 mt-8 mb-3\",\n      p: \"text-base leading-7 text-gray-600 mb-4\",\n      a: \"text-blue-600 underline hover:text-blue-800\",\n      blockquote: \"border-l-4 border-gray-300 pl-4 italic text-gray-500\",\n      table: \"min-w-full divide-y divide-gray-200\",\n      \"thead th\": \"px-4 py-2 text-left text-sm font-semibold text-gray-900\",\n      \"tbody td\": \"px-4 py-2 text-sm text-gray-700\",\n      \"tbody tr:nth-child(2n)\": \"bg-gray-50\",\n      img: \"rounded-lg shadow-md\",\n      pre: \"rounded-lg overflow-hidden\",\n      \"pre > code\": \"block p-4 text-sm\",\n    }),\n  ],\n});\n```\n\n### 属性选择器\n\n根据属性来选中元素：\n\n```ts\nimport { compile, addClasses } from \"@unifast/node\";\n\nconst result = compile(md, {\n  plugins: [\n    addClasses({\n      \"[href$=\\\".pdf\\\"]\": \"pdf-link\",\n      \"[href^=\\\"https\\\"]\": \"external\",\n      \"[data-type]\": \"has-type\",\n    }),\n  ],\n});\n```",
  "alternates": [
    {
      "locale": "en",
      "url": "https://unifast.dev/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/docs/packages/node/add-classes.json"
    },
    {
      "locale": "ja",
      "url": "https://unifast.dev/ja/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/ja/docs/packages/node/add-classes.json"
    },
    {
      "locale": "zh-CN",
      "url": "https://unifast.dev/zh-CN/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/zh-CN/docs/packages/node/add-classes.json"
    },
    {
      "locale": "zh-TW",
      "url": "https://unifast.dev/zh-TW/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/zh-TW/docs/packages/node/add-classes.json"
    },
    {
      "locale": "ko",
      "url": "https://unifast.dev/ko/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/ko/docs/packages/node/add-classes.json"
    },
    {
      "locale": "fr",
      "url": "https://unifast.dev/fr/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/fr/docs/packages/node/add-classes.json"
    },
    {
      "locale": "it",
      "url": "https://unifast.dev/it/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/it/docs/packages/node/add-classes.json"
    },
    {
      "locale": "es",
      "url": "https://unifast.dev/es/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/es/docs/packages/node/add-classes.json"
    },
    {
      "locale": "pt-BR",
      "url": "https://unifast.dev/pt-BR/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/pt-BR/docs/packages/node/add-classes.json"
    },
    {
      "locale": "de",
      "url": "https://unifast.dev/de/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/de/docs/packages/node/add-classes.json"
    },
    {
      "locale": "ru",
      "url": "https://unifast.dev/ru/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/ru/docs/packages/node/add-classes.json"
    },
    {
      "locale": "hi",
      "url": "https://unifast.dev/hi/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/hi/docs/packages/node/add-classes.json"
    },
    {
      "locale": "id",
      "url": "https://unifast.dev/id/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/id/docs/packages/node/add-classes.json"
    },
    {
      "locale": "tr",
      "url": "https://unifast.dev/tr/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/tr/docs/packages/node/add-classes.json"
    },
    {
      "locale": "vi",
      "url": "https://unifast.dev/vi/docs/packages/node/add-classes/",
      "api": "https://unifast.dev//api/vi/docs/packages/node/add-classes.json"
    }
  ]
}