# Trouble w/ output from elm-default-tailwind-modules **URL:** \ **Category:** Learn\ **Created:** [May 22, 2021, 4:05pm UTC](https://discourse.elm-lang.org/t/trouble-w-output-from-elm-default-tailwind-modules/7385 "2021-05-22T16:05:05Z")\ **Posts on this page:** 7\ **Page:** 1

**Author:** ![szicari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/szicari/32/3300_2.png) [@szicari](https://discourse.elm-lang.org/u/szicari)\ **Post date:** [May 22, 2021, 4:05pm UTC](https://discourse.elm-lang.org/t/trouble-w-output-from-elm-default-tailwind-modules/7385/1 "2021-05-22T16:05:05Z")

I am attempting to develop a website using tailwind and elm-default-tailwind-modules. The first step for me is to learn tailwind. The way I’m doing that is by porting example tailwind layouts to Elm. The result, so far, has some inconsistencies. Any help is greatly appreciated! I used [html-to-elm.com](http://html-to-elm.com) (props to Dillon Kearns for the great tool!) to convert the [Dark nav with white page header](https://tailwindui.com/preview) example. I compared the generated classes between Elm and the original, and they appear to be consistent. I’ve attached screenshots comparing the “vanilla” HTML output vs that generated from Elm. They are largely the same, except spacing and fonts differ for reasons I cannot determine. ## Elm Implementation [Home\_.elm](https://github.com/SeanZicari/elm-tailwind-learning/blob/master/src/Pages/Home_.elm) ## Elm Result ![index-elm](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/8/853b7f230c30efabd93d5a674c6e36c09fbf53e0.jpeg) ## HTML Implementation [index-vanilla.html](https://github.com/SeanZicari/elm-tailwind-learning/blob/master/public/index-vanilla.html) ## HTML Result ![index-vanilla](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/d/d00030a72c52f2ef9fd635443201cff43bbba933.jpeg) ---

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\ **Post date:** [May 22, 2021, 4:24pm UTC](https://discourse.elm-lang.org/t/trouble-w-output-from-elm-default-tailwind-modules/7385/2 "2021-05-22T16:24:34Z")

This seems to be your index.html for the Elm page: > It links to: [https://rsms.me/inter/inter.css](https://rsms.me/inter/inter.css) At the top of that stylesheet, there’s a comment that says: ```auto Use like this in your CSS: :root { font-family: 'Inter', sans-serif; } @supports (font-variation-settings: normal) { :root { font-family: 'Inter var', sans-serif; } } ``` But you don’t seem to include that CSS. I tried this: ```auto

Some text!

``` And that seems to load the “Inter” font. ---

**Author:** ![szicari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/szicari/32/3300_2.png) [@szicari](https://discourse.elm-lang.org/u/szicari)\ **Post date:** [May 22, 2021, 4:50pm UTC](https://discourse.elm-lang.org/t/trouble-w-output-from-elm-default-tailwind-modules/7385/3 "2021-05-22T16:50:39Z")

Thanks, @lydell! That got me a step closer. The font looks better but the styling still looks off. Is my understanding correct that I shouldn’t need to install and include tailwindcss with my project because `elm-default-tailwind-modules` implements all the CSS classes found in the default tailwind stylesheet? I found an Elm function for each tailwind class, and the documentation led me to the same conclusion. It _should_ be enough that I use the Elm functions. What I notice that still differs: - The text is underlined - The border is missing around the profile dropdown - The content doesn’t stretch all the way from one side to the other - Shadow styling is missing around profile dropdown Here’s what I have now: ## Elm Result ![index-elm](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/5/54d8fa6be0c80d18c749282ddf42680a6e984340.jpeg) ## HTML Result ![index-vanilla](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/e/e0386c9d95cf75e8bf2b01dc080d37a647f98b93.jpeg) ---

**Author:** ![zinggi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/zinggi/32/62_2.png) [@zinggi](https://discourse.elm-lang.org/u/zinggi)\ **Post date:** [May 23, 2021, 10:04pm UTC](https://discourse.elm-lang.org/t/trouble-w-output-from-elm-default-tailwind-modules/7385/4 "2021-05-23T22:04:08Z")

You seem to be missing the `Css.Global.global globalStyles` line from the [docs](https://package.elm-lang.org/packages/matheus23/elm-default-tailwind-modules/latest/Tailwind-Utilities#globalStyles). ---

**Author:** ![szicari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/szicari/32/3300_2.png) [@szicari](https://discourse.elm-lang.org/u/szicari)\ **Post date:** [May 24, 2021, 3:03am UTC](https://discourse.elm-lang.org/t/trouble-w-output-from-elm-default-tailwind-modules/7385/5 "2021-05-24T03:03:33Z")

That was it! Thank you for pointing that out. I completely overlooked it. ---

**Author:** ![szicari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/szicari/32/3300_2.png) [@szicari](https://discourse.elm-lang.org/u/szicari)\ **Post date:** [May 24, 2021, 3:09am UTC](https://discourse.elm-lang.org/t/trouble-w-output-from-elm-default-tailwind-modules/7385/6 "2021-05-24T03:09:44Z")

I can’t mark two answers as solutions, so I’m going to summarize the solutions here and credit the authors. @lydell pointed out that I didn’t follow the directions at the top of the [inter font file](https://rsms.me/inter/inter.css). @zinggi pointed out that I was not including the global styles from the [tailwind Elm module docs](https://package.elm-lang.org/packages/matheus23/elm-default-tailwind-modules/latest/Tailwind-Utilities#globalStyles). Thank you both! ---

**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:** [June 3, 2021, 3:10am UTC](https://discourse.elm-lang.org/t/trouble-w-output-from-elm-default-tailwind-modules/7385/7 "2021-06-03T03:10:16Z")

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