Put some Tailwind in your Elm

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

monty5811 / postcss-elm-tailwind

put some tailwind in your elm

postcss-elm-tailwind

tailwind + elm = 🚀

See the demo and repo.

view : Model -> Html Msg
view model =
    Html.div [ TW.h_screen, TW.w_screen, TW.flex, TW.justify_center, TW.items_center, TW.bg_gray_200 ]
        [ Html.div []
            [ Html.button
                [ E.onClick Decrement
                , TW.px_2
                , TW.px_4
                , TW.text_white
                , TW.bg_blue_500
                , TW.w_full
                ]
                [ Html.text "-" ]
            , Html.div
                [ TW.text_2xl
                , TW.text_center
                , TW.my_4
                ]
                [ Html.text (String.fromInt model) ]
            , Html.button
                [ E.onClick Increment
                , TW.px_2
                , TW.px_4
                , TW.text_white
                , TW.bg_blue_500
                , TW.w_full
                ]

…

View on GitHub

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

• repo
• demo
• demo source

Comments

[Jesse Cooke]

This is a fantastic contribution to the community! I recently used Elm Bootstrap and it was really pleasant to work with, though I want to move more towards Tailwind. I'll definitely use this on my next Elm+Tailwind project.

[monty5811]

Thanks Jesse! 😁

[Martin Kavík]

I'm happy that more people like you want to use typed CSS.

I was using typed Tachyons with Elm and I've written similar PostCSS plugin, but for multiple languages and you can filter out unused CSS classes: github.com/MartinKavik/postcss-typ.... You can send a PR with Elm generator or I can add it if it is of interest to someone.

[monty5811]

Nice project - thanks! I'll take a look

[Lenz Zuber]

Just finally created an account @dev.to just to tell how glad I am about your plugin! Thanks a lot! Works like a charm!