anmolitor / elm-review-tailwindcss / TailwindCss.NoCssConflict

rule : Options -> Review.Rule.Rule

Reports if two classes in a class list modify the same css properties. This avoids some weird behaviour like the order of classes in the stylesheet being relevant.

config =
    [ TailwindCss.NoCssConflict.rule { props = classProps, checkedFunctions = [checkClassFunction] }
    ]

It is not recommended to define the `props` 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 `classProps` in your `ReviewConfig.elm` file.

Fail

a =
    class "p-2 p-4 flex"

Success

a =
    "p-2 flex"

When (not) to enable this rule

This rule is useful when your CSS classes are generally really small and composable. This rule is not useful when you want to override properties of other classes explicitely.

Try it out

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

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


type alias Options =
{ props : Dict String (Set String)
, checkedFunctions : List TailwindCss.CheckedFunction.CheckedFunction 
}

Options for the NoCssConflict rule.

props:               should be generated from the postcss plugin
checkedFunctions:    a list of function calls to check for css conflicts

defaultOptions : { props : Dict String (Set String) } -> Options

Provide required options and defaults the other options