{
  "url": "https://unifast.dev/es/docs/packages/node/add-classes/",
  "locale": "es",
  "title": "addClasses()",
  "description": "Añade clases CSS a los elementos que coinciden con selectores CSS.",
  "section": "packages",
  "body": "```ts\nimport { addClasses } from \"@unifast/node\";\n```\n\n## Firma\n\n```ts\nfunction addClasses(rules: Record<string, string>): UnifastPlugin\n```\n\n## Parámetros\n\n### rules\n\nUn `Record<string, string>` donde las claves son selectores CSS y los valores son nombres de clase separados por espacios que se añadirán a los elementos coincidentes. Las clases se combinan con cualquier clase existente en el elemento.\n\n### Selectores soportados\n\nSoporta un amplio subconjunto de CSS Selectors Level 4, incluyendo:\n\n- **Selectores de etiqueta**: `h1`, `p`, `table`\n- **Selectores de clase**: `.info`, `.alert.warning`\n- **Selectores de ID**: `#main`\n- **Selector universal**: `*`\n- **Selectores de atributo**: `[data-type]`, `[href^=\"https\"]`, `[href$=\".pdf\"]`, `[href*=\"example\"]`, `[class~=\"bar\"]`, `[lang|=\"en\"]`\n- **Combinadores**: descendiente (` `), hijo (`>`), hermano adyacente (`+`), hermano general (`~`)\n- **Pseudo-clases**: `:first-child`, `:last-child`, `:nth-child()`, `:not()`, `:empty`\n- **Selectores separados por coma**: `h1, h2, h3`\n- **Selectores compuestos**: `div.alert#main[data-type=\"warning\"]`\n\n## Uso\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## Ejemplos\n\n### Selectores separados por coma\n\nAplica las mismas clases a múltiples tipos de elementos:\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### Selectores complejos\n\nUsa combinadores y pseudo-clases para una selección precisa:\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### Clases utilitarias de Tailwind CSS\n\nUn patrón común es usar `addClasses` para aplicar utilidades de Tailwind al HTML generado a partir de 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### Selectores de atributo\n\nApunta a elementos basándote en sus atributos:\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"
    }
  ]
}