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

[oskarunt]

Any solution to this? Dealing with the same problem unfortunately :/

[ashu-shukla]

Even Treedatagrid is not working... it has to do something with how the CSS is working with tailwind v4. The shadow is gone and also the grids lines/borders as well.

[ashu-shukla]

The issue is that Tailwind CSS v4's Vite plugin uses LightningCSS, which incorrectly transforms light-dark().
I moved to compatible approach with color-scheme and CSS custom properties that work properly with LightningCSS.

so i for now removed ligt-dark function from the css and added

/* Root */
@layer rdg.Root {

/* Replace all light-dark() functions and split to dark and light color-scheme */
    --rdg-color: light-dark(#000, #ddd);
    --rdg-border-color: light-dark(#ddd, #444);
    --rdg-summary-border-color: light-dark(#aaa, #555);
...
* Light mode colors (default) */
    --rdg-color: #000;
    --rdg-border-color: #ddd;
    --rdg-summary-border-color: #aaa;
    --rdg-background-color: hsl(0deg 0% 100%);
....
@media (prefers-color-scheme: dark) {
.rdg-7-0-0-beta-58-ccd2e5d9:not(.rdg-light) {
      --rdg-color: #ddd;
      --rdg-border-color: #444;
      --rdg-summary-border-color: #555;
      --rdg-background-color: hsl(0deg 0% 13%);
...
} 
and default light