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
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
]
…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 youTW.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
- Install:
yarn add postcss-elm-tailwind
- Add
require("postcss-elm-tailwind")({ elmFile: "src/TW.elm" })
to yourpostcss.config.js
file - Start using the generated Elm module
import TW
!
Check out the
Top comments (5)
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.
Thanks Jesse! 😁
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.
Nice project - thanks! I'll take a look
Just finally created an account @dev.to just to tell how glad I am about your plugin! Thanks a lot! Works like a charm!