I just published canonical_tailwind, a formatter plugin that canonicalizes Tailwind CSS utility classes in HEEx templates.
- mr-4 custom-btn flex ml-[1rem] flex
+ custom-btn mx-4 flex
It delegates to the tailwindcss CLI’s new canonicalize subcommand — the same engine that powers the Prettier plugin. So you get sorting, normalization, and duplicate collapsing powered directly by the Tailwind CSS engine.
It hooks into mix format via Phoenix LiveView 1.1’s attribute_formatters API and works with LSP format-on-save (tested with Expert).
Setup is two lines — one dep, one formatter config:
# mix.exs
{:canonical_tailwind, "~> 0.1.0", only: [:dev, :test], runtime: false}
# .formatter.exs
[
plugins: [Phoenix.LiveView.HTMLFormatter],
attribute_formatters: %{class: CanonicalTailwind},
]
If you’re already using the :tailwind hex package, it detects your binary and profile automatically. Make sure your tailwind version in config/config.exs is at least 4.2.2 and run mix tailwind.install after changing it.
Requires Elixir ~> 1.18, Phoenix LiveView ~> 1.1, and tailwindcss CLI >= 4.2.2 (the first version with canonicalize). The canonicalize --stream flag that makes this possible was merged in tailwindcss#19796.
Hex: canonical_tailwind | Hex
Docs: canonical_tailwind v0.3.0 — Documentation
