`js
import Alpine from 'alpinejs';
import directive, { amp } from 'alpine-typografiy/dist/amp/module.mjs';

amp.className = 'text-red-500';
Alpine.plugin(directive);
Alpine.start();
`

or you can add multiple directives at once:

`js
import Alpine from 'alpinejs';
import {
amp,
caps,
ord,
quotes,
smartypants,
typogrify,
widont,
functions,
} from 'alpine-typogrify';

functions.amp.className = 'text-red-500';

Alpine.plugin(amp);
Alpine.plugin(caps);
Alpine.plugin(ord);
Alpine.plugin(quotes);
Alpine.plugin(smartypants);
Alpine.plugin(typogrify);
Alpine.plugin(widont);

Alpine.start();
`

x-amp

Wraps ampersands in HTML with so they can be styled with CSS. Ampersands are also normalized to &. Requires ampersands to have whitespace or an   on both sides. Will not change any ampersand which has already been wrapped in this fashion.

x-caps

Wraps multiple capital letters in so they can be styled.

x-ord

Wraps number suffix's in so they can be styled.

x-quotes

Wraps initial quotes in for double quotes or for single quotes. Works inside these block elements:

- h1, h2, h3, h4, h5, h6
- p
- li
- dt
- dd

It also accounts for potential opening inline elements: a, em,
strong, span, b, i.

x-smartypants

- Straight quotes ( " and ' '") into “curly” quote HTML entities (‘ | ’ | “ | ”)
- Backticks-style quotes (like this''') into “curly” quote HTML entities (‘ | ’ | “ | ”)
- Dashes (“--” and “---”) into n-dash and m-dash entities (– | —)
- Three consecutive dots (“...”) into an ellipsis entity (…)

x-widont

Based on Shaun Inman's PHP utility of the same name, it replaces the
space between the last two words in a string with   to avoid
a final line of text with only one word.

Works inside these block elements:

- h1, h2, h3, h4, h5, h6
- p
- li
- dt
- dd

It also accounts for potential closing inline elements: a, em,
strong, span, b, i`.

x-typogrify

Applies all of the following filters, in order:

- amp
- widont
- smartypants
- caps
- quotes
- ord

[npm version]: https://img.shields.io/npm/v/alpine-typogrify
[npm]: https://www.npmjs.com/package/alpine-typogrify
[david]: https://img.shields.io/david/dev/Jonnitto/alpine-typogrify?logo=npm
[david-dm]: https://david-dm.org/Jonnitto/alpine-typogrify?type=dev
[github issues]: https://img.shields.io/github/issues/Jonnitto/alpine-typogrify
[issues]: https://github.com/Jonnitto/alpine-typogrify/issues
[github forks]: https://img.shields.io/github/forks/Jonnitto/alpine-typogrify
[network]: https://github.com/Jonnitto/alpine-typogrify/network
[github stars]: https://img.shields.io/github/stars/Jonnitto/alpine-typogrify
[stargazers]: https://github.com/Jonnitto/alpine-typogrify/stargazers
[github license]: https://img.shields.io/github/license/Jonnitto/alpine-typogrify
[license]: LICENSE
[sponsor @jonnitto on github]: https://img.shields.io/badge/sponsor-Support%20this%20package-informational
[sponsor]: https://github.com/sponsors/jonnitto
[github watchers]: https://img.shields.io/github/watchers/Jonnitto/alpine-typogrify.svg
[subscription]: https://github.com/Jonnitto/alpine-typogrify/subscription
[alpine.js]: https://alpinejs.dev
[typogr.js]: https://github.com/ekalinin/typogr.js/
[take a look at the example file]: example.html