# Elm-tailwind-modules: First Release :)

**URL:** <https://discourse.elm-lang.org/t/elm-tailwind-modules-first-release/6899>\
**Category:** Show and Tell\
**Created:** [February 10, 2021, 3:49pm UTC](https://discourse.elm-lang.org/t/elm-tailwind-modules-first-release/6899 "2021-02-10T15:49:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Philipp\_Krueger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/philipp_krueger/32/2674_2.png) [@Philipp\_Krueger](https://discourse.elm-lang.org/u/Philipp_Krueger)\
**Post date:** [February 10, 2021, 3:49pm UTC](https://discourse.elm-lang.org/t/elm-tailwind-modules-first-release/6899/1 "2021-02-10T15:49:35Z")

</div>

Are you using [elm-css](https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/) and want to make use of [tailwind](https://tailwindcss.com)?

You can now use my new (npm) package [elm-tailwind-modules](https://github.com/matheus23/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](https://discourse.elm-lang.org/t/generate-your-tailwind-utilities-as-elm-css-functions/6076). 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:

```elm
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:

[![](https://raw.githubusercontent.com/matheus23/elm-tailwind-modules/master/test-example/result.png) ](https://raw.githubusercontent.com/matheus23/elm-tailwind-modules/master/test-example/result.png)

Check out the [readme](https://github.com/matheus23/elm-tailwind-modules#readme) for more information.

---

<div class="post-metadata">

**Author:** ![georgesboris](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/georgesboris/32/3598_2.png) [@georgesboris](https://discourse.elm-lang.org/u/georgesboris)\
**Post date:** [February 11, 2021, 6:49pm UTC](https://discourse.elm-lang.org/t/elm-tailwind-modules-first-release/6899/2 "2021-02-11T18:49:36Z")

</div>

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

Looks pretty awesome!

---

<div class="post-metadata">

**Author:** ![bigardone](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/bigardone/32/581_2.png) [@bigardone](https://discourse.elm-lang.org/u/bigardone)\
**Post date:** [February 12, 2021, 11:51am UTC](https://discourse.elm-lang.org/t/elm-tailwind-modules-first-release/6899/3 "2021-02-12T11:51:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Philipp\_Krueger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/philipp_krueger/32/2674_2.png) [@Philipp\_Krueger](https://discourse.elm-lang.org/u/Philipp_Krueger)\
**Post date:** [February 12, 2021, 3:23pm UTC](https://discourse.elm-lang.org/t/elm-tailwind-modules-first-release/6899/4 "2021-02-12T15:23:19Z")

</div>

## 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/](https://package.elm-lang.org/packages/matheus23/elm-default-tailwind-modules/latest/)

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

```auto
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.

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! 🙂

### 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](http://package.elm-lang.org) upload limitations)

---

<div class="post-metadata">

**Author:** ![danbruder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/danbruder/32/585_2.png) [@danbruder](https://discourse.elm-lang.org/u/danbruder)\
**Post date:** [February 17, 2021, 1:20am UTC](https://discourse.elm-lang.org/t/elm-tailwind-modules-first-release/6899/5 "2021-02-17T01:20:29Z")

</div>

this package is awesome! thank you!

---

<div class="post-metadata">

**Author:** ![Philipp\_Krueger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/philipp_krueger/32/2674_2.png) [@Philipp\_Krueger](https://discourse.elm-lang.org/u/Philipp_Krueger)\
**Post date:** [February 25, 2021, 7:23pm UTC](https://discourse.elm-lang.org/t/elm-tailwind-modules-first-release/6899/6 "2021-02-25T19:23:03Z")

</div>

## 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](https://github.com/matheus23/elm-tailwind-modules/#full-control) 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](https://package.elm-lang.org/packages/matheus23/elm-default-tailwind-modules/latest/) will always be there 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [March 7, 2021, 7:23pm UTC](https://discourse.elm-lang.org/t/elm-tailwind-modules-first-release/6899/7 "2021-03-07T19:23:24Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.