{
  "url": "https://unifast.dev/zh-TW/docs/packages/node/add-classes/",
  "locale": "zh-TW",
  "title": "addClasses()",
  "description": "為符合 CSS 選擇器的元素加上 CSS class。",
  "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 選擇器，值為要加到符合元素上、以空白分隔的 class 名稱。新增的 class 會與元素現有的 class 合併。\n\n### 支援的選擇器\n\n支援廣泛的 CSS Selectors Level 4 子集，包含：\n\n- **標籤選擇器**：`h1`、`p`、`table`\n- **Class 選擇器**：`.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將相同的 class 套用至多種元素類型：\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 工具 class\n\n常見的做法是使用 `addClasses` 將 Tailwind 工具 class 套用到 Markdown 產生的 HTML 上：\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"
    }
  ]
}