Data grid style conflict with tailwindbase

[robert-luoqing]

Describe the bug

When I import Tailwind's style components into index.css, the grid's style changes unexpectedly and no longer appears as the default or preferred design. However, when I comment out @tailwind base;, the style reverts to normal.

Here is the code I'm using:

@tailwind base;
@tailwind components;
@tailwind utilities;

Issue Screenshots
Unexpected style (with @tailwind base;)

Normal style (without @tailwind base;)

Request for Help
How can I resolve this issue? I want to include @tailwind base; in my project but still maintain the normal style.

To Reproduce

Link to code example:

Expected behavior

Environment

• "react-data-grid": "^7.0.0-beta.47",
• react/react-dom: "^18.3.1",

Additional context

[amanmahajan7]

Can you create a reproducible example?

[robert-luoqing]

Here is sample.
The reproduction step is as follows:

1. npx create-react-app data-grid-test
2. npm install react-data-grid
3. Follow https://tailwindcss.com/docs/guides/create-react-app to add tailwind to the project
4. Put data-grid to App.js which is included in the zip file
5. The difference style if you comment out the "@tailwind base;" in index.css.

data-grid-test.zip

[amanmahajan7]

Can you create a codesandbox/stackblitz example?

[robert-luoqing]

https://codesandbox.io/p/devbox/react-data-grid-style-conflict-with-tailwind-sx8whr

[amanmahajan7]

RDG uses css layers and it seems like tailwind styles are unlayed in the above example and the following block overrides RDG styles

*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;

Is this a setup issue as it looks like tailwind does have layers . I am changing this issue to a discussion as it is not a bug in RDG