Vitepress渲染Markdown时TailwindCSS样式不生效问题求助

问题概述 #

在Vitepress渲染的Markdown文件中使用TailwindCSS类名（如bg-green-500），元素能正常显示但样式完全不生效，已参考多份配置教程仍未解决。

当前项目/docs目录结构 #

测试用Markdown文件内容（/docs/global/inputs/primary-button.md） #

# primary-button

## Props

| Prop name | Description | Type  | Values | Default |
| --------- | ----------- | ----- | ------ | ------- |
| type      |             | union | -      |         |

## Slots

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

---

<button class="bg-green-500">
hello world
</button>

按钮可正常显示，但绿色背景样式未生效。

tailwind.config.cjs配置内容 #

/** @type {import('tailwindcss').Config} */

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  content: [
    './src/**/*.{html,ts,vue}',
    './docs/**/*.{html,js,vue,ts,md}',
    './docs/.vitepress/**/*.{html,js,vue,ts,md}',
  ],
  theme: {...},
  plugins: [],
}

/docs/.vitepress/config.ts配置内容 #

import { defineConfig } from 'vitepress'
import { buildSidebarConfig } from '../../src/lib/vitepressSidebar'

export default defineConfig({
  base: '/docs/',
  title: 'Trinity UI Documentation',
  titleTemplate: ':title',
  lastUpdated: true,
  themeConfig: {
    logo: '/.vitepress/logo.ico',
    siteTitle: 'Trinity UI Docs',
    sidebar: [
      {
        items: buildSidebarConfig('src/components'),
      },
    ],
    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
    ],
  },
})

解决方案 #

• 创建Tailwind入口样式文件：在/docs/.vitepress/theme目录下新建style.css，写入以下内容

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

• 在Vitepress主题中引入样式：在/docs/.vitepress/theme/index.ts（不存在则新建）中导入样式文件

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

export default DefaultTheme

• 确认内容扫描路径：保持tailwind.config.cjs中content数组的配置不变，已覆盖所有需要扫描的文件
• 重启开发服务：修改配置后重启Vitepress开发服务器，确保新配置生效

内容的提问来源于stack exchange，提问作者Artur Müller Romanov