Are you using elm-css and want to make use of tailwind?
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.
