Repository navigation
Data grid style conflict with tailwindbase #3668
Description
Activity
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.
Can you create a codesandbox/stackblitz example?
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
tailwinddoes have layers . I am changing this issue to a discussion as it is not a bug in RDG- locked and limited conversation to collaborators
on Dec 18, 2024
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