Upgrade React v19 and Tailwind v4

[raix]

Updating all dependencies - biggest ones are React v19 / Tailwind v4 / RAC + testing rspress v2 beta

Draft:

• Waiting for [Rspress 2.0][Theme]: tailwindcss isolated web-infra-dev/rspress#1967 due to preflight.css style / reset issue breaking Tailwind. (hoping for better namespacing)

[SoonIter]

hey rspress guys, any blocking points when migrating to Rspress 2.0-beta.5 :D

Waiting for web-infra-dev/rspress#1967 due to preflight.css style / reset issue breaking Tailwind. (hoping for better namespacing)

Could you provide some details or how can I help you bypass it?

https://github.com/web-infra-dev/rspress/blob/17dc8228de3fad421f80ff8a09e70d7dca4be8f7/packages/theme-default/src/styles/base.css#L74

the preflight.css within Rspress is forked from tailwind V3, are these color css variables conflicted with v4?

[raix]

Hey @SoonIter thanks for reaching out ❤️

I'm using Tailwind v4 for styling the content / component library - but due to the order of loaded styles it seems like the preflight.css is overwriting the Tailwind styles.

Buttons render without padding etc.

When disabling the preflight styles for button:

Let me know if I can help out in any way or provide more insights

[SoonIter]

I'm using Tailwind v4 for styling the content / component library - but due to the order of loaded styles it seems like the preflight.css is overwriting the Tailwind styles.

I judge from your screenshot that this issue should be the default style declaration of tailwind v4 in the @layer, causing it to have a lower priority than the preflight.css style within Rspress.

Almost all component libraries have a preflight.css to smooth out browser differences so does rspress, perhaps Rspress cannot support this issue by modifying the code of preflight.css... sorry

so this issue should be checked to see if the tailwind v4 community has a solution.

tailwindlabs/tailwindcss#15864

[raix]

@SoonIter when looking into the generated styles.css file - the application / user space styling is in the top, then a reset/preflight.css followed by rspress.

Meaning styles in user space would always have lower priority than the reset?

Not sure if it's an issue in rspress / Tailwind or in our configuration - one could argue that presets / resets / preflight should be on the first layer of priority / "base".

Example:

/* @import "tailwindcss"; */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

[raix]

Looking at the @rspress/theme-default it seems like using Tailwind 3.x - might also explain why the preflight is not on a layer