[Bug]: When customizing a page using TailwindCSS, internal components encounter styling errors

[wjsoj]

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.

[Timeless0911]

This should be caused by the import of two copies of tailwind css styles.

In fact, the Rspress theme style has already introduced tailwind related styles, see

https://github.com/web-infra-dev/rspress/blob/d51aa1c91e29062c39d2243d32a70ac3d09de645/packages/theme-default/src/styles/base.css#L1-L3

You can remove @import 'tailwindcss/utilities'; in src/styles/index.css to make it work. In fact, you can use built-in tailwind css style without import any tailwind css helper.

Or you can set prefix in your tailwind.config.js to isolate from the built-in tailwind styles.

@SoonIter We need to add prefix for our built-in tailwind css in Rspress 2.0, and modify the doc of https://rspress.dev/guide/basic/custom-page#tailwind-css.

[wjsoj]

Thanks for the answer. Setting prefix is a good choice. However, By removing @import 'tailwindcss/utilities';, there are still some utilities that cannot be parsed. I just tested an example <h1 className="text-indigo-200 font-semibold text-4xl">Some Text</h1>, where only font-semibold took effect.

[wjsoj]

Thanks for the answer. Setting prefix is a good choice. However, By removing @import 'tailwindcss/utilities';, there are still some utilities that cannot be parsed. I just tested an example <h1 className="text-indigo-200 font-semibold text-4xl">Some Text</h1>, where only font-semibold took effect.

Additional note: When using a prefix, in order to apply dark mode, you also need to add the corresponding prefix to dark. I temporarily resolved this using the Runtime API useDark.

[Timeless0911]

Thank you for your attempts and feedback, which will be of great help to our future optimization.