nextra icon indicating copy to clipboard operation
nextra copied to clipboard

Styling breaks when importing nextra stylesheet in an existing tailwind project

Open iamnottheway opened this issue 3 years ago • 3 comments

Hello,

I'm trying to integrate nextra docs into an existing nextjs tailwind project but importing the nextra stylesheet breaks/override some of the styles throughout the project. Removing the stylesheet seems to fix the issue but that's not really going to work for the docs.

I've tried copying all the styles from here into a new stylesheet but importing that doesn't seem to work as well.

This is what I see when I copy all the styles from the above link and import it

Screenshot 2021-11-15 at 10 11 20 PM

These styles get overridden when importing nextra-theme-docs/style.css

Screenshot 2021-11-15 at 10 15 16 PM

Is there anyway to fix this? Appreciate any help! Thanks!

iamnottheway avatar Nov 15 '21 16:11 iamnottheway

Yeah there's some unscoped styles in the docs theme, ideally all docs theme work should be scoped to the specific docs work so that if you use this in an existing app it doesn't wreck all the other styles.

dashcraft avatar Jan 06 '22 23:01 dashcraft

I am facing the same

bhatvikrant avatar Feb 06 '22 07:02 bhatvikrant

@bhatvikrant you can use my pr and fix the issue then copy paste the generated styles instead of the modules CSS export

dashcraft avatar Feb 06 '22 18:02 dashcraft

https://github.com/shuding/nextra/issues/492#issuecomment-1205884261

dimaMachina avatar Aug 23 '22 10:08 dimaMachina