anmolitor / elm-review-tailwindcss / TailwindCss.ConsistentClassOrder

rule : Options -> Review.Rule.Rule

Reports if a css class string does not adhere to the recommended class order

config =
    [ TailwindCss.ConsistentClassOrder.rule { order = classOrder, checkedFunctions = [checkClassFunction] }
    ]

It is not recommended to define the `order` option manually. Instead you can use the [postcss-plugin](https://www.npmjs.com/package/elm-review-tailwindcss-postcss-plugin)
to generate the Elm code for you and then you can just import the `classOrder` in your `ReviewConfig.elm` file.

Fail

a =
    class "flex absolute"

Success

a =
    class "absolute flex"

When (not) to enable this rule

This rule is useful when you are using tailwindcss and the recommended class order helps you read and understand the code faster. This rule is not useful when you are not using tailwindcss, you do not care in which order the classes are, or you disagree with the recommended order.

Try it out

You can try this rule out by adding the postcss-plugin to your postcss.config.js and running the following command:

elm-review --template anmolitor/elm-review-tailwindcss/example --rules TailwindCss.ConsistentClassOrder

Executing postcss (via your bundler for example) should generate the needed files in your /review directory so that the template compiles.


type alias Options =
{ order : Dict String Basics.Int
, checkedFunctions : List TailwindCss.CheckedFunction.CheckedFunction 
}

Options for the ConsistentClassOrder rule.

order:               should be generated from the postcss plugin
checkedFunctions:    a list of function calls to check for consistent class order

defaultOptions : { order : Dict String Basics.Int } -> Options

Provide required options and defaults the other options