Elm-tailwind-modules: First Release :)

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.

22 Likes

Oh boy - I’ll migrate my work app + elm-ui-book to this ASAP. :heart:

Looks pretty awesome!

2 Likes

Awesome! I love elm-css and I always use it, and I also love Tailwind, so this is just perfect for me, thanks!

1 Like

Exciting News!

A new elm package: elm-default-tailwind-modules

You want to check out tailwind, but don’t want to install npm?

Just use this prebuilt package I just published!

https://package.elm-lang.org/packages/matheus23/elm-default-tailwind-modules/latest/

No css files, no additional js libraries, no additional build. Only this:

elm install matheus23/elm-default-tailwind-modules
elm install rtfeldman/elm-css

And you’re set up.

The package’s source code was obviously generated with elm-tailwind-modules (see its generate.js file on github).

I’ve also spiced it up by:

  • Running autoprefixer as part of code generation, so you have maximum browser compatibility

  • Adding the @tailwindcss/typography, @tailwindcss/forms and @tailwindcss/aspect-ratio plugins so that it’s as batteries-included as possible.

    Remember that anything you don’t actually use will not have an impact on your bundle size because of Elm’s dead code elimination!

Once you need more customization, you can switch from relying on this project to generating your own modules, for example, if you want to adjust your color theme to your brand.

Let me know what you think! :slight_smile:

A new release: elm-tailwind-modules v0.2.0

This release adds support for generating documentation for all your generated functions with the new --with-docs flag. This feature is used for elm-default-tailwind-modules.

(please note that the 0.2.0 version actually generates more elaborate documentation than the docs in the elm-default-tailwind-modules package due to some package.elm-lang.org upload limitations)

8 Likes

this package is awesome! thank you!

1 Like

New Node API Release: Version 0.3.0

This is a fairly small release. The essence is this: You can optionally use elm-tailwind-modules more like a normal postcss plugin.

This release is for two types of users:

  • Those who use the Node API
  • Those who couldn’t switch from a postcss pipeline to elm-tailwind-modules, yet.

Some things aren’t yet supported in elm-css. For example, the @font-face rule in css. But what if you wanted to switch to elm-tailwind-modules and want to keep using your css (with these rules)?
elm-tailwind-modules won’t be able to generate code for globalStyles in these cases.

So it makes sense to fall back to normal css files for all global css.

However, the way elm-tailwind-modules worked before, it swallowed all css you wrote and didn’t spit anything out again. This now changes for anyone using the elmTailwindModules.asPostcssPlugin function. elm-tailwind-modules will ‘consume’ all css it could actually turn into elm functions and not touch the rest. You can then use normal postcss to output that css to a file. I’ve added an example to the readme for this.

So, if you’ve felt that this project was cool, but could not quite replace your existing postcss configuration and css files, please try again now!

Other than that, the node API got more documentation and small usability improvements.


For all others who just want to use tailwindcss in elm, no worries. You won’t have to write javscript build scripts, the CLI or even the prebuilt package will always be there :slight_smile:

2 Likes