SvelteKit and Tailwind set up guide doesn't seem to work

[john-pome]

I've opened an issue in the documentation repository here, but this is a blocker and I thought this might be the better place to put it. Feel free to close either one as appropriate.

Any guidance appreciated!

---

The Svelte Kit set up guide doesn't seem to work correctly, link here

Observed behavior

I've set up 4 brand new Svelte Kit projects, following exactly the instructions linked above, and none of them seem to integrate Tailwind correctly. In each case I selected a skeleton project with no add ons. In all cases the observed behavior is the same:

• npm run dev will load on localhost, and everything will render with no style, and as paragraph text (the h1 header from the svelte kit demo renders as if its a p tag)
• the app.css file loads in the network tab
• inspecting the header shows an h1 html tag even though its rendered as if it were a p
• there are no console errors

System info

This was performed twice on a 2020 Macbook Air, Monterey 12.5 with:

• Safari 15.6
• Chrome 122.0.6261.69
• Node 20.18.0
• npm 10.8.2

And twice on Ubunutu 22.04.4 LTS running on ARM64 with:

• Firefox v 131.0 aarch64
• Chrome 129.0.6668.90
• Node 20.17.0
• npm 10.8.2

Things I tried

I tried many things for several hours, but the most notable two things are:

1. Removing the postcss.config.js file at least allows my +page.svelte to render normal html (ie the header appears "normal"), but tailwind classes do not work.
2. If instead of putting the tailwind directives in app.css, I wrap them in a <style> tag and create a Svelte component out of them, and import that in my +layout.svelte file, it also renders normal HTML, but still does not render Tailwind applied to the page.

[wongjn]

Seems to work for me using your exact Node and NPM versions:

Consider providing an example project that reproduces the unexpected behavior.

[john-pome]

Reproduced

But this was helpful, thanks. Perhaps my test of whether it was working wasn't correct, but I do have the same behavior as you (I think), and the same behavior I had before. When I tested it I was using different tailwind classes than the example they provided.

Without the tailwind class in the h1 tag it just renders as a paragraph text. Is that expected behavior to override the html tags? I'd expect tailwind to work "on top" of them.

[wongjn]

Your project does seem to be working for me:

Without the tailwind class in the h1 tag it just renders as a paragraph text. Is that expected behavior to override the html tags?

This is expected behavior, as per the documentation:

Headings are unstyled

All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text.

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

The reason for this is two-fold:

• It helps you avoid accidentally deviating from your type scale. By default, browsers assign sizes to headings that don't exist in Tailwind's default type scale, and aren't guaranteed to exist in your own type scale.
• In UI development, headings should often be visually de-emphasized. Making headings unstyled by default means any styling you apply to headings happens consciously and deliberately.

You can always add default header styles to your project by adding your own base styles.

[john-pome]

Thanks, I guess this one is on me. I must have had a typo or something when testing tailwind classes and it wasn't showing up, and with everything rendering unstyled I assumed it wasn't working right.