Nextra theme styles are overriding my component library's styles which uses tailwind css

Question

I am using Nextra to write documentation for my ui library.

When I import my component in a .mdx file the theme styling of nextra is overriding my components original tailwind styling.

Nextra has a styles.css file in nextra-theme-docs which has a style for buttons

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

This makes my imported buttons from my component transparent.

Note: When I create a page named test.js in pages folder the buttons style are rendered properly.

Steps to reproduce:

1. Install nextra and create a page called button.mdx in pages folder and also create a _app.js file in pages folder
2. Install my library npm i dashboard-components-library (it is still under development)
3. Install tailwind css following this guide
4. Create a globals.css file in and add this tailwind css to it from this file and import this file in the _app.js file
5. Now add this code to your button.mdx file

# Getting Started
 
For existing or new project add the dashboard-components-library using the NPM package manager.

import { Button } from "dashboard-components-library";

<Button text="Primary Button Type" buttonType="Primary"></Button>

6. Run in dev mode