View Source TailwindFormatter (TailwindFormatter v0.1.0)
Enforce a class
attribute order within markup using TailwindCSS.
this is a mix format
plugin.
Note: The Tailwind Formatter requires Elixir v1.13.4 or later
installation
Installation
Add tailwind_formatter
to your list of dependencies in mix.exs
:
def deps do
[
{:tailwind_formatter, "~> 0.1.0"}
# alternatively, keep track with the latest release:
{:tailwind_formatter, github: "100phlecs/tailwind_formatter"}
]
end
setup
Setup
Add it as a plugin to your project's .formatter.exs
.
Make sure to put in the heex
extension to the possible inputs.
[
plugins: [TailwindFormatter],
inputs: [
"*.{heex,ex,exs}",
"{config,lib,test}/**/*.{heex,ex,exs}"
],
]
Then run mix deps.get
and also mix compile
to load in the plugin.
After that, run the formatter with mix format
.
If using different formatters on the template, it is suggested
to list TailwindFormatter
as the first extension.
formatting
Formatting
The formatter aims to follow a bundle of rules outlined in the blog post that introduces the official Tailwind sorter plugin.
- Order them the same way classes are imported in the CSS file. Base, Components, Utilities.
- Classes that override other classes appear later in the list
- Classes that impact layout take precedence over classes that decorate
- Plain classes come first before variants (i.e.
focus:
) - Unknown classes are sorted to the front
As a bonus, this plugin supports the Phoenix variants that ship with new applications.
As this is quite new, there may be some new Tailwind classes missing.
credits
Credits
This project builds heavily off of rustywind and HTMLFormatter.
Link to this section Summary
Functions
Callback implementation for Mix.Tasks.Format.features/1
.
Callback implementation for Mix.Tasks.Format.format/2
.
Link to this section Functions
Callback implementation for Mix.Tasks.Format.features/1
.
Callback implementation for Mix.Tasks.Format.format/2
.