TailwindFormatter - Opinionated tailwind class sorter for HEEx templates

Here’s the repo link: GitHub - 100phlecs/tailwind_formatter: Formats tailwind classes within elixir projects

The idea is to have a consistent ordering of tailwind classes so it is easier to read through.
The solution uses Regex which, at times, feels a little brittle, but so far works in most cases.

It bails if it doesn’t have a clean selection to work with, so if you end up using it you may find sometimes the classes won’t sort. This usually happens due to too many inline elixir functions which I’ve yet to investigate.

Still, it’s ‘alpha’ at the moment, i.e. if there are a lot of inline elixir functions it may not sort.
Been using it in my private repositories without much issue though!

This is my first elixir library package, so feel free to critique/send PRs.
Still rather new to elixir :slight_smile:

If you’re curious on how I gathered all of the classes and variants, I pulled them out of the official tailwindcss library, with plugins attached. Here is the unorganized repo where I generate them: tailwindsort/index.js at d823656f1ffe26519f21fe4e458de482534121ee · 100phlecs/tailwindsort · GitHub

Hope you find it useful!

10 Likes

Nice work.


For guys don’t like extra deps, and want to sort classes and group classes manually, you can do something like this:

<body class={[
  "h-screen overflow-hidden",
  "bg-gray-300",
  "select-none"
]}>
  <%= @inner_content %>
</body>

A: Why do you group classes?
B: Because I want to seperate the concerns, like:

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual
  5. Misc

This idea comes from Code Guide by @mdo.

4 Likes