Data grid style conflict with tailwindbase #3674
Replies: 6 comments
-
Can you create a reproducible example? |
Beta Was this translation helpful? Give feedback.
-
Here is sample.
|
Beta Was this translation helpful? Give feedback.
-
Can you create a codesandbox/stackblitz example? |
Beta Was this translation helpful? Give feedback.
-
https://codesandbox.io/p/devbox/react-data-grid-style-conflict-with-tailwind-sx8whr |
Beta Was this translation helpful? Give feedback.
-
RDG uses css layers and it seems like tailwind styles are unlayed in the above example and the following block overrides RDG styles
Is this a setup issue as it looks like |
Beta Was this translation helpful? Give feedback.
-
Any solution to this? Dealing with the same problem unfortunately :/ |
Beta Was this translation helpful? Give feedback.
-
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:
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
/react-dom
: "^18.3.1",Additional context
Beta Was this translation helpful? Give feedback.
All reactions