Version

System:
    OS: Linux 6.9 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 6800H with Radeon Graphics
    Memory: 5.45 GB / 14.82 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
Browsers:
    Chromium: 126.0.6478.126
    (I actually use Chromium & Firefox 128.0)
npmPackages:
    rspress: ^1.26.1 => 1.26.2

Details

Here‘s what I have done:

1. Configured TailwindCSS following the official website's tutorial.
2. Added a simple component under the src/components directory:
   
3. At this point, the Hero section on the main page encountered an issue (I haven't even used this component anywhere.) : the flex-row property above the md breakpoint was not being applied.
   
   

During previous attempts, I also encountered an issue where the breakpoint for the homepage title was not functioning, causing the font size to remain at text-3xl persistently. When I emptied the contents of index.css, the styling error disappeared (however, I was also unable to apply TailwindCSS's features).

I'm curious about the cause of this issue and why components not referenced in the page are interfering with the existing theme's styles.

I look forward to understanding the cause and a solution to this problem. Thank you!

Reproduce link

https://github.com/wjsoj/rspress-report

Reproduce Steps

1. execute npm install & npm run dev
   (The reposity link is https://github.com/wjsoj/rspress-report)
2. try adjusting the width of the viewpoint, you'll see the Hero remains in a vertical layout.