I created a PostCSS plugin that will take your Tailwind configuration and generate elm-css functions. This is similar to monty5811/postcss-elm-tailwind (and actually leveraged some foundational code from it) but instead of creating
Html.Attribute it generates elm-css
The main benefit is that by leveraging elm-css, you can take advantage of Elm’s function-level dead code elimination. Tailwind generates A LOT of css. Their documentation directs you to use PurgeCSS to help keep your bundle size to the classes that you use. But with the Elm compiler, you get that automatically, which is pretty cool.
Some other cool things:
- Most of the styles are generating actual elm-css functions and not just using the
Css.propertyescape hatch. This means I do get some validation on the correctness of the styles via the Elm compiler. Of course this is not foolproof, but it’s a good gut check
- As with everything in Elm, composability is key. This mean you can assemble your utilities into reusable complex groupings, sort of like the Tailwind
- I run elm-format on the generated output. Not super important, but I think it’s a nice little touch
npm run testgenerates the output, runs the elm compiler on it, then uses Jest snapshot testing to help see if I broke anything.
A good chunk of standard utilities generate and compile. I have documented the known limitations at this point, but hope to get some of them figured out. The JS code is definitely a tad messy. Definitely some cleanup in the near future so be kind if you dig into the JS
Go check it out, and let me know what you think!