{
  "url": "https://unifast.dev/id/docs/packages/node/add-classes/",
  "locale": "id",
  "title": "addClasses()",
  "description": "Menambahkan class CSS ke elemen yang cocok dengan selector CSS.",
  "section": "packages",
  "body": "```ts\nimport { addClasses } from \"@unifast/node\";\n```\n\n## Signature\n\n```ts\nfunction addClasses(rules: Record<string, string>): UnifastPlugin\n```\n\n## Parameter\n\n### rules\n\nSebuah `Record<string, string>` dengan key berupa selector CSS dan value berupa nama class yang dipisahkan spasi untuk ditambahkan ke elemen yang cocok. Class akan digabungkan dengan class yang sudah ada pada elemen.\n\n### Selector yang didukung\n\nMendukung subset luas dari CSS Selectors Level 4, termasuk:\n\n- **Tag selector**: `h1`, `p`, `table`\n- **Class selector**: `.info`, `.alert.warning`\n- **ID selector**: `#main`\n- **Universal selector**: `*`\n- **Attribute selector**: `[data-type]`, `[href^=\"https\"]`, `[href$=\".pdf\"]`, `[href*=\"example\"]`, `[class~=\"bar\"]`, `[lang|=\"en\"]`\n- **Combinator**: descendant (` `), child (`>`), adjacent sibling (`+`), general sibling (`~`)\n- **Pseudo-class**: `:first-child`, `:last-child`, `:nth-child()`, `:not()`, `:empty`\n- **Selector dipisahkan koma**: `h1, h2, h3`\n- **Compound selector**: `div.alert#main[data-type=\"warning\"]`\n\n## Penggunaan\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## Contoh\n\n### Selector dipisahkan koma\n\nTerapkan class yang sama ke beberapa tipe elemen:\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### Selector kompleks\n\nGunakan combinator dan pseudo-class untuk penargetan yang presisi:\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### Class utility Tailwind CSS\n\nPola umum adalah menggunakan `addClasses` untuk menerapkan utility Tailwind ke HTML yang dihasilkan dari Markdown:\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### Attribute selector\n\nTargetkan elemen berdasarkan atributnya:\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"
    }
  ]
}