@ryu/deno-lint-plugin-tailwindcss

A Deno Lint Plugin for Tailwind CSS that automatically sorts classes.

Important

Currently, we are building this linter plugin rule based on Biome's use_sorted_classes due to limitations in Deno Lint specification, but in the future we plan to replace it with the same rules as prettier-plugin-tailwindcss. Many breaking changes may occur until the migration is complete.

How to use

Add the plugin to your deno.json(c):

// deno.json(c)
{
  "lint": {
    "plugins": ["jsr:@ryu/[email protected]"]
  }
}

And just run deno lint --fix.

Supported sort targets

JSX/TSX attributes

Supports class and className attributes. That means it supports React, Preact, SolidJS, Qwik, and more!

function StarButton() {
  return (
    <button class="rounded-md bg-gray-200 px-4 py-2 font-semibold text-gray-700">
      Star
    </button>
  );
}

Utility functions

Supports clsx() in clsx, cn() used in shadcn/ui, and tw tagged templates.

const class1 = clsx("flex items-center p-4 text-red-500");
const class2 = cn("flex items-center p-4 text-red-500");
const class3 = tw`flex items-center p-4 text-red-500`;

Philosophy

Although this is a linter plugin, its role is primarily formatting, so it only provides minimal options, in keeping with Prettier's option philosophy.

License

MIT