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:
Reports if a css class string does not adhere to the recommended class order
Fail
Success
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:
Executing postcss (via your bundler for example) should generate the needed files in your /review directory so that the template compiles.