DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

monty5811
monty5811

Posted on • Updated on • Originally published at deanmontgomery.com

Put some Tailwind in your Elm

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

GitHub logo monty5811 / postcss-elm-tailwind

put some tailwind in your elm

postcss-elm-tailwind

tailwind + elm = πŸš€

See the demo and repo.

Actions Status

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
                ]
…
Enter fullscreen mode Exit fullscreen mode

What

Go from this:

Html.div [ A.class "container mx-auto" ] [] 
Enter fullscreen mode Exit fullscreen mode

To this:

Html.div [ TW.container, TW.mx_auto ] [] 
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode
  • 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

Top comments (5)

Collapse
 
jc00ke profile image
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.

Collapse
 
monty5811 profile image
monty5811

Thanks Jesse! 😁

Collapse
 
martinkavik profile image
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.

Collapse
 
monty5811 profile image
monty5811

Nice project - thanks! I'll take a look

Collapse
 
lezuber profile image
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!

Let's Get Wacky


Use any Linode offering to create something unique or silly in the DEV x Linode Hackathon 2022 and win the Wacky Wildcard category

β†’ Join the Hackathon <-