rehype-sort-tailwind-classes

Sort Tailwind CSS classes in HTML.

Install

This package is ESM-only: Node 12+ is needed to use it and it must be importeded instead of requiredd.

npm:

npm install rehype-sort-tailwind-classes

This package exports no identifiers. The default export is rehypeSortTailwindClasses.

Use

On the API:

 import { unified } from 'unified';
 import rehypeParse from 'rehype-parse';
+import rehypeSortTailwindClasses from 'rehype-sort-tailwind-classes';
 import rehypeStringify from 'rehype-stringify';

 unified()
   .use(rehypeParse)
+  .use(rehypeSortTailwindClasses)
   .use(rehypeStringify)
   .process('<span>some html</span>', function (err, file) {
     console.error(report(err || file));
     console.log(String(file));
   });

On the CLI:

rehype input.html --use rehype-sort-tailwind-classes --output output.html

Example

In

<div class="z-50 z-10 container text-left md:text-center justify-center"></div>

Out

<div class="container z-10 z-50 justify-center text-left md:text-center"></div>

Options

The plugin accepts any options supported by Tailwind Classes Sorter.

Additionally, it supports a pluginOrder: string[] option to augment the default plugin ordering.

License

MIT