Reports unsorted Tailwind CSS classes in Attr.class declarations and provides automatic fixes to organize them into logical groups.

config =
    [ Tailwind.SortAndGroupClasses.rule
    ]

Fail

Html.div
    [ Attr.class "text-gray-700 mt-4 flex p-2 bg-white"
    ]
    []

Success

Html.div
    [ Attr.class "flex"
    , Attr.class "p-2"
    , Attr.class "mt-4"
    , Attr.class "text-gray-700"
    , Attr.class "bg-white"
    ]
    []

When (not) to enable this rule

This rule is useful when you want consistent, readable Tailwind class organization across your Elm codebase. It helps maintain a standard ordering and grouping of utility classes.

This rule is not useful when you have a different preferred class ordering, or when you're not using Tailwind CSS with Attr.class patterns.

Try it out

You can try this rule out by running the following command:

elm-review --template cekrem/elm-review-tailwind/example --rules Tailwind.SortAndGroupClasses