Tailwind class conflicts when used in Markdown with vitepress

Question

I'm using vitepress for documenting our app. It reads markdown and renders it in vue components. Unfortunately there seems to be a conflict with a tailwind default class (setting all borders to 0 on button components) and a button I am applying the class to. The class works fine with components in the src folder but not with vitepress.

I've set it up in a docs directory in root:

The component not displaying the border is MyButton.md:

# MyButton

## Props

| Prop name | Description | Type    | Values | Default |
| --------- | ----------- | ------- | ------ | ------- |
| blub      |             | string  | -      |         |
| check     |             | boolean | -      |         |

## Events

| Event name | Properties | Description |
| ---------- | ---------- | ----------- |
| toggle     |            |

## Slots

| Name    | Description | Bindings |
| ------- | ----------- | -------- |
| default |             |          |

---

<button class="bg-orange-300 text-black border border-black rounded px-3 py-1.5 hover:bg-orange-400 transition">
  click me
</button>

```vue live
<MyButton blub="5" />
```

Tailwind is correctly imported in custom.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --vp-c-brand: #f44300;
  --vp-c-green-dark: #ff8c00;
}

.VPDocOutlineDropdown {
  display: none !important;
}

which then get's loaded into index.js:

import DefaultTheme from 'vitepress/theme'
import './custom.css'

export default DefaultTheme

and further used in an extended default theme.

The vitepress config.ts looks like this:

import { SiteConfig } from 'vitepress'
import { generateSidebarConfig } from "./generate-sidebar"

// https://vitepress.dev/reference/site-config
const config: SiteConfig = {
  title: "blub",
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Examples', link: '/markdown-examples' }
    ],
    sidebar: generateSidebarConfig()
  }
}

export default config

I've tried adding the vitepress folders to tailwind.config but it doesn't help:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/App.vue',
    './src/**/*.js',
    './src/**/*.vue',
    './docs/.vitepress/theme/*.vue',
    './docs/.vitepress/theme/*.js'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The button is displayed without border:

Dev tools show that the border class is correctly applied to the button but then conflicting with the button selector:

When I change the button to a div, the border is applied correctly.

Anything I can do to make the border class work correctly on button elements?

Answer 1

If you want Tailwind classes to have more priority over the default classes in VitePress, consider adding the important option in the tailwind.config.js file:

module.exports = { important: true}

See the tailwind docs for reference.