# Add attributes

Maizzle can automatically add attributes to HTML elements in your email templates.

This can be useful for:

- adding default attributes based on build Environment or Template
- not having to write required attributes all the time
- automating email accessibility

The `attributes.add` key in your config defines which elements in your emails should receive which attributes with what values.

## Usage

Here is how you would add a `role="article"` attribute to a `<div>`:

```js [config.js]
export default {
  attributes: {
    add: {
      div: {
        role: 'article',
      },
    },
  }
}
```

## Default attributes

By default, Maizzle makes any `<table>` accessible, resets its spacing, and ensures that an empty `alt=""` attribute is added to images that don't have it.

This is the default configuration:

```js
let attributes = {
  table: {
    cellpadding: 0,
    cellspacing: 0,
    role: 'none',
  },
  img: {
    alt: '',
  }
}
```

<alert>

Attributes will be added only if they're not already present on the element.

</alert>

### Disabling

You may turn this off by setting `extraAttributes` to `false` in your config:

```js [config.js]
export default {
  attributes: {
    add: false,
  }
}
```

## Selectors

Tag, class, id, and attribute selectors are supported:

```js [config.js]
export default {
  extraAttributes: {
    div: {
      id: 'new',
    },
    '.test': {
      editable: true,
    },
    '#test': {
      'data-foo': 'bar',
    },
    '[role]': {
      'aria-roledescription': 'slide',
    },
  }
}
```

## Multiple selectors

Add multiple attributes to multiple elements in one go:

```js [config.js]
export default {
  attributes: {
    add: {
      'div, p': {
        class: 'test',
      },
      'div[role=alert], section.alert': {
        class: 'alert',
      },
    },
  }
}
```

## Tailwind CSS

Any Tailwind CSS classes that you add with this Transformer need to be added to your `content` key, otherwise they will not be generated.

To do this, simply add the path to your `config.js` file to the `content` array:

```js [tailwind.config.js]
export default {
  content: ['./config.js'],
}
```

## API

```js [app.js]
import { addAttributes } from '@maizzle/framework'

const options = {
  div: {
    role: 'article'
  }
}

const html = await addAttributes('<div></div>', options)
```