Tailwind core/reset file added after other css files in astro build

[lukewatts]

What version of astro are you using?

1.1.3

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

Tailwind CSS files in build are being added last (or second last), causing tailwind reset file to override scoped (in file) CSS.

To replicate...

1. install the Blog template
2. Run astro add tailwind
3. Run astro build
4. Go to any page other than Home and check the order of the CSS files. Tailwind is last or second last which breaks the styles

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-vymz2e?file=tsconfig.json,astro.config.mjs,tailwind.config.cjs,package.json,src%2Fconfig.ts,src%2Fenv.d.ts,src%2Fpages%2Fblog.astro,src%2Flayouts%2FBlogPost.astro,dist%2Findex.html&on=stackblitz

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

I think this is related to the general problem of scoped styles being placed before all imported styles, causing imported styles to override them.

[matthewp]

Is this example even using Tailwind? I don't see the usage.

[matthewp]

I guess the reset happens anyways?

[matthewp]

A related issue: #4446

[matthewp]

Ok, I looked into this a bit. So what is happening here is that you are generating a few bundles but the important ones are:

1. global.css + Footer.astro
2. Tailwind reset

Both of these bundles are used on all 9 pages. I'm not sure there's really a way for us to determine which of these bundles should go first and which should go last. From Astro's perspective they both seem equally important as they are used just as much.

Going to look into a couple of options.

[matthewp]

Ok, I think I have a solution for this based on source order. Need to figure out how to write a test.