Data grid style conflict with tailwindbase

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

Can you create a reproducible example?

Here is sample.
The reproduction step is as follows:

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

data-grid-test.zip

Can you create a codesandbox/stackblitz example?

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

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

Navigation Menu

Repository navigation

Data grid style conflict with tailwindbase #3668

Describe the bug

To Reproduce

Expected behavior

Environment

Additional context

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Data grid style conflict with tailwindbase #3668

Description

Describe the bug

To Reproduce

Expected behavior

Environment

Additional context

Activity

amanmahajan7 commented on Dec 16, 2024

robert-luoqing commented on Dec 17, 2024

amanmahajan7 commented on Dec 17, 2024

robert-luoqing commented on Dec 18, 2024

amanmahajan7 commented on Dec 18, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions