You can now use my new (npm) package elm-tailwind-modules!
Give it a tailwind configuration file and it’ll generate elm code that includes all the tailwind classes as
elm-css style definitions as well as configured fonts and the tailwind style reset.
I’ve been working on this project from time to time in the last 6 months, because I’ve been excited by @justinrassier’s idea of postcss-elm-css-tailwind project. Having taliwindcss in elm with autocompletion and a non-global namespace, which purges with just the elm
--optimize option was just a great goal to work towards.
I forked his library, because I wanted to do some things a little differently, e.g. to change how breakpoints work (and initially I wanted it to work with something else than elm-css, but I’ve scrapped that idea). Now I think it’s a slightly different and more feature complete version.
Here’s some example code to illustrate what using the generated code looks like:
import Css exposing (hover) import Css.Global import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css, href) import Tailwind.Breakpoints exposing (..) -- This is a generated module import Tailwind.Utilities exposing (..) -- This is another generated module main = toUnstyled <| div [ css [ bg_gray_50 ] ] [ -- This will give us the standard tailwind style-reset as well as the fonts Css.Global.global globalStyles , div [ css [ mt_8 , flex -- We use breakpoints like this -- However, you need to order your breakpoints from hight to low :/ , lg [ mt_0, flex_shrink_0 ] ] ] [ div [ css [ inline_flex, rounded_md, shadow ] ] [ a [ css [ inline_flex , items_center , justify_center , px_5 , py_3 , border , border_transparent , text_base , font_medium , rounded_md , text_white , bg_indigo_600 -- We can use hover styles via elm-css :) , hover [ bg_indigo_700 ] ] , href "#" ] [ text "Get started" ] ] ] ]
The result is a nicely-styled “Get started” button with correct fonts and styling:
Check out the readme for more information.