Tailwind added after my style block clearing all styles

[kubre]

What version of astro are you using?

2.10.7

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

Vercel

What package manager are you using?

pnpm

What operating system are you using?

Windows

What browser are you using?

Chrome, Firefox

Describe the Bug

I'm using the tailwind plugin for Astro, after updating Astro to the latest version it started adding a tailwind at the end of the head tag(as shown in the image). This causes any style added above to be reset on tags like h1 { @apply bg-black } etc won't work. Downgrading back to the old version 2.0.15 and styles apply fine. Please check stackblitz

What's the expected result?

Custom styles should be added after the base styles of the tailwind.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-vbv2yk

Participation

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

[kubre]

If anyone wants a quick fix for now I'm using it .parent class for general tags like h2, p etc. to override the base styles from a tailwind.

/* So rather than using */
h1 { <styles> }

/* Use */
.parent h1 { <styles> }

in HTML you will need

[natemoo-re]

Sorry for the frustration! This behavior has switched back and forth and we really need to stabilize this.

I'm guessing that this regression was caused by #8011 which switches how we crawl imports to find which styles need to be injected. This likely reverted the crawling order and messed up how styles were being injected during dev.

[Dunqing]

UnoCSS has the same issue, unocss/unocss#2821

[bluwy]

I traced this to a Vite bug. The import order was not preserved by Vite dev module graph which caused the CSS to be out of order too. vitejs/vite#14465

[bluwy]

Going to close this for now as the work is done, and the fix is upstream. I'll look into backporting and releasing a patch for Vite 4 perhaps around this week or so.