{
  "url": "https://unifast.dev/fr/docs/packages/node/add-classes/",
  "locale": "fr",
  "title": "addClasses()",
  "description": "Ajoute des classes CSS aux éléments correspondant à des sélecteurs 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## Paramètres\n\n### rules\n\nUn `Record<string, string>` dont les clés sont des sélecteurs CSS et les valeurs des noms de classes séparés par des espaces, à ajouter aux éléments correspondants. Les classes sont fusionnées avec toutes les classes déjà présentes sur l'élément.\n\n### Sélecteurs pris en charge\n\nPrend en charge un large sous-ensemble de CSS Selectors Level 4, notamment :\n\n- **Sélecteurs de balise** : `h1`, `p`, `table`\n- **Sélecteurs de classe** : `.info`, `.alert.warning`\n- **Sélecteurs d'ID** : `#main`\n- **Sélecteur universel** : `*`\n- **Sélecteurs d'attribut** : `[data-type]`, `[href^=\"https\"]`, `[href$=\".pdf\"]`, `[href*=\"example\"]`, `[class~=\"bar\"]`, `[lang|=\"en\"]`\n- **Combinateurs** : descendant (` `), enfant (`>`), frère adjacent (`+`), frère général (`~`)\n- **Pseudo-classes** : `:first-child`, `:last-child`, `:nth-child()`, `:not()`, `:empty`\n- **Sélecteurs séparés par des virgules** : `h1, h2, h3`\n- **Sélecteurs composés** : `div.alert#main[data-type=\"warning\"]`\n\n## Utilisation\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## Exemples\n\n### Sélecteurs séparés par des virgules\n\nAppliquez les mêmes classes à plusieurs types d'éléments :\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### Sélecteurs avancés\n\nUtilisez les combinateurs et les pseudo-classes pour un ciblage précis :\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### Classes utilitaires Tailwind CSS\n\nUne utilisation courante consiste à employer `addClasses` pour appliquer des utilitaires Tailwind au HTML généré depuis 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### Sélecteurs d'attribut\n\nCiblez les éléments en fonction de leurs attributs :\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"
    }
  ]
}