Trouble w/ output from elm-default-tailwind-modules

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 (props to Dillon Kearns for the great tool!) to convert the Dark nav with white page header 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


Elm Result

HTML Implementation


HTML Result

This seems to be your index.html for the Elm page:

It links to:

At the top of that stylesheet, there’s a comment that says:

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:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="">
    :root { font-family: 'Inter', sans-serif; }
    @supports (font-variation-settings: normal) {
      :root { font-family: 'Inter var', sans-serif; }
  <p>Some text!</p>

And that seems to load the “Inter” font.

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

HTML Result

You seem to be missing the globalStyles line from the docs.

1 Like

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

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.

@zinggi pointed out that I was not including the global styles from the tailwind Elm module docs.

Thank you both!


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