TwSort

Sorts Tailwind CSS utility classes in HEEx templates via mix format.

Sort order matches the Prettier plugin — classes are ordered by their position in Tailwind's compiled CSS output.

Requirements

• Elixir ~> 1.17
• Phoenix LiveView ~> 1.1 (for attribute_formatters support)
• The :tailwind package configured with at least one profile

Setup

Add tw_sort to your dependencies:

# mix.exs
defp deps do
  [
    {:tw_sort, "~> 0.1.0", only: :dev}
  ]
end

Then in .formatter.exs, add attribute_formatters alongside your existing HEEx formatter plugin:

# .formatter.exs
[
  plugins: [Phoenix.LiveView.HTMLFormatter],
  attribute_formatters: %{class: TwSort},
  # ...
]

Now mix format sorts Tailwind classes in class attributes automatically.

How it works

The default sorter reads the CSS output file from your tailwind profile configuration (the --output= path in your profile's args). It parses the CSS to determine class ordering by rule position — the same approach used by the Prettier plugin.

The result is cached in memory. When the output file changes (detected via mtime), the cache refreshes automatically.

If the output file doesn't exist yet (e.g., first run), TwSort runs the tailwind CLI itself to generate it.

Multiple tailwind profiles

If your project has a single tailwind profile, TwSort detects it automatically. With multiple profiles, specify which one to use:

# .formatter.exs
[
  attribute_formatters: %{class: TwSort},
  tw_sort: [profile: :app],
  # ...
]

Custom sorter

TwSort uses a pluggable sorter system. Implement the TwSort.Sorter behaviour to provide your own class ordering. With a custom sorter, the :tailwind package is not required.

defmodule MySorter do
  @behaviour TwSort.Sorter

  @impl true
  def class_order(_opts) do
    # Return a map of class name to sort position
    %{"flex" => 1, "block" => 2, ...}
  end
end

# .formatter.exs
[
  attribute_formatters: %{class: TwSort},
  tw_sort: [sorter: MySorter],
  # ...
]