Of Last Importance

Put some Tailwind in your Elm

31 Oct 2019

tl;dr a postcss plugin to put your Tailwind classes into Elm

What

Go from this:

Html.div [ A.class "container mx-auto" ] []

To this:

Html.div [ TW.container, TW.mx_auto ] []

Why

  • More compiler guarantees - catch typos in your class names. Elm can’t tell you that A.class "mx-uato" is a typo, but it will tell you TW.mx_uato doesn’t exist.
  • Code completion - leverage code completion for Elm to know which tailwind classes are available

How

  • We create a new postcss plugin that grabs all the classes in your css
  • For each class we create a new Elm function that looks something like this:
{-|Tailwind class:
    xl:z-40"
-}
xl_z_40 : Html.Attribute msg
xl_z_40 =
    A.class "xl:z-40"
  • We then write out each of these new functions to create an Elm module that you can import like any other

The Elm module generated with the default Tailwind build is about 900kb, but the Elm compiler removes any functions that are unused: so you don’t need to worry about your asset size. It can take a few seconds to compile the module - but this only needs to happen once for every time you change your Tailwind config.

Get Started

  1. Install: yarn add postcss-elm-tailwind
  2. Add require("postcss-elm-tailwind")({ elmFile: "src/TW.elm" }) to your postcss.config.js file
  3. Start using the generated Elm module import TW!

Check out the