Proposal to Generate Tailwind CSS Preflight as Separate File to Resolve Component Style Conflicts

[Misaka299]

A few days ago I created a nextjs project and introduced antd. During the development process, I found that the default style of antd's buttons was abnormal.
I searched for related content in issues and got three solutions:

1. Disable preflight
2. use ConfigProvider and StyleProvider

export default function App({Component, pageProps}) {
     return (
         <ConfigProvider>
             <StyleProvider hashPriority="high">
                 <Component {...pageProps} />
             </StyleProvider>
         </ConfigProvider>
     );
}

3. Move the order of tailwindcss

export default function App({Component, pageProps}) {
     useEffect(() => {
         const head = document.querySelector('head');
         const tailWindStyleTag = [...head.querySelectorAll('style')].find((style) =>
             style.innerHTML.includes('tailwind')
         );
         head.insertAdjacentElement('afterbegin', tailWindStyleTag);
     }, []);

     return <Component {...pageProps} />;
}

These three answers are not satisfactory to me.
After I disabled preflight, the positions of various elements on the page changed strangely. It’s not as good as the look and feel after turning on preflight.
The other two answers will cause the priority of antd css to be greater than the priority of tailwind.css. As a result, the style of tailwindcss will be overwritten, and the style of tailwindw will not take effect as expected.

The essential cause of css conflicts is incorrect priority order.
If the order of tailwindcss is higher than that of antd, it will cause the antd conflict style to become invalid.
If the order of antd is higher than that of tailwindcss, the conflicting style of tailwindcss will become invalid.

In my experience, I expected that the correct priority of css should be tailwindcss > antd > tailwindcss's preflight.
I think only with this priority order can tailwindcss and antd styles take effect normally.

I only mentioned antd here. But I think if there is a style conflict problem in other libraries, this method can also be used to solve it.

So I propose to generate preflight as a separate file and put it on the top layer as the most basic style for all styles. tailwindcss remains unchanged and is still at the bottom, and the user-set style provides the highest priority.To achieve the priority of tailwindcss > any > tailwindcss's preflight.

[PaRoxUs]

We have the same problem when using tailwind with module federation. The remote component styles overwrite the ones applied in the hosting app for the remote component.