100phlecs
TailwindFormatter - Opinionated tailwind class sorter for HEEx templates
Here’s the repo link: GitHub - 100phlecs/tailwind_formatter: Sorts tailwind classes within elixir projects · GitHub
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 
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/src/index.js at d823656f1ffe26519f21fe4e458de482534121ee · 100phlecs/tailwindsort · GitHub
Hope you find it useful!
Most Liked
100phlecs
New release, thanks to those who raised issues & contributed!
Shoutout to @aptinio for ironing out the expression sorting, sorting multiple :class attributes & handling leading-trailing spacing issues between string fragments. 
I’ve added some highlights in the changelog.
A quick summary is that most if not all of the code fragments within a class={} are supported and sorted.
You can also now load in your custom TailwindCSS configuration instead of using the default ones I’ve generated awhile back.
Note: This release requires Elixir v1.15+. We’ve dropped MultiFormatter as Elixir v.1.15+ now supports multiple formatters.
100phlecs
New release!
TailwindFormatter now includes TailwindFormatter.MultiFormatter as a .formatter.exs plugin option, which will format your heex templates with Phoenix.Liveview.HTMLFormatter first, then with TailwindFormatter. This makes it so you no longer have to deal with scripts in order to use TailwindFormatter on a Phoenix project.
Also includes a bug fix on preserving original class order for user-defined classes.
Thanks to zachallaun the README is cleaned up!
Thank you to those who suggested these changes
c4710n
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:
- Positioning
- Box model
- Typographic
- Visual
- Misc
This idea comes from Code Guide by @mdo.
Popular in Announcing
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"