Open wjsoj opened 1 month ago
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
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.
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.
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.
Thank you for your attempts and feedback, which will be of great help to our future optimization.
Version
Details
Here‘s what I have done:
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
npm install
&npm run dev
(The reposity link is https://github.com/wjsoj/rspress-report)