Gatsby Themes + TailwindCSS: Why are styles from the theme not applied to the site using the theme?

[DennisKraaijeveld]

Hi! Moving over from a single site to using Gatsby Themes so I can reuse my base project, but I am running into a few things and I hope someone could help me out a bit.

I am using Tailwind CSS and I bloated my files style my components like this:

<div className="bg-red-800 text-white font-semibold">
<p className="text-4xl">Testing</p>
</div>

The first thing I noticed, is that those styles are not applied to the website which is using the theme. I had to write all those styles in .scss files (.component {@apply bg-red-900}) in order to get it to work. Which I had planned to do anyway, but I am still curious why those styles were not applied.

The second thing, and most important for me now, is that custom components added with the @layer directive, are also not applied to the main site. When running yarn develop on the theme, everything works like a charm.

So how could I make sure that all my custom utilities and components, which where added with the @layer directive, are also applied on every website which is using the theme?

[DennisKraaijeveld]

Styles are applied when using a separate CSS file where I import Tailwind, but only if I add the templates and pages where the styles are written, to the site directory. But obviously I need the templates and pages to come from the theme, instead of moving them manually to all of my sites.

[DennisKraaijeveld]

Solved for now. .scss files are really buggy it seems to be right now with Gatsby + Tailwind. I solved it by changing back to css.