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

Learn
1

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 (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

Home_.elm

Elm Result

index-elm
index-elm2088×1698 166 KB

HTML Implementation

index-vanilla.html

HTML Result

index-vanilla
index-vanilla2088×1698 161 KB

2

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

It links to:

https://rsms.me/inter/inter.css

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">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  <style>
    :root { font-family: 'Inter', sans-serif; }
    @supports (font-variation-settings: normal) {
      :root { font-family: 'Inter var', sans-serif; }
    }
  </style>
</head>
<body>
  <p>Some text!</p>
</body>
</html>

And that seems to load the “Inter” font.

3

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
index-elm2088×1698 168 KB

HTML Result

index-vanilla
index-vanilla2088×1698 160 KB

4

You seem to be missing the Css.Global.global globalStyles line from the docs.

1 Like
5

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

6

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!

2 Likes
7

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