Astro Info

Astro                    v5.0.2
Node                     v18.20.3
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I use mdx files do import CSS based on dynamic components from CMS.

After migrating to v5, it stopped working properly in dev mode. It works only on first page load after build. CSS is missing after refresh and won't appear until rebuild.

I nailed it down to combination of tailwind applying styles, and scanning every astro file:

// tailwind.config.js

export default {
    content: ['./src/**/*.astro'],
};

// astro.config.mjs

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import tailwind from '@astrojs/tailwind';

// https://astro.build/config
export default defineConfig({
  integrations: [
    mdx(),
    tailwind({
      // applyBaseStyles: false,
    }),
  ],
});

If i disable scanning of all astro files or disable applyBaseStyles it works.

Also, i tried using new collections API, but the same thing is happening, so I just made example with minimum code

What's the expected result?

To apply styles imported from mdx on page refresh. Initially, page background is red from CSS code, and on refresh styles are not applied.

Link to Minimal Reproducible Example

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

Participation

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