由于vitepress项目和tailwindcss最新版的变化，目前网络上关于在vitepress项目中使用tailwind的整合教程都会报错，除非退回旧版本。

2025年9月，最新版本的整合方法如下（使用pnpm管理包）

一、安装vitepress2.0

1.安装包

pnpm add -D vitepress@next

2.初始化

参考我的配置（强烈建议Theme选Default Theme + Customization）：

npx vitepress init

  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Where should VitePress look for your markdown files?
│  ./docs
│
◇  Site title:
│  冲击波大宇宙
│
◇  Site description:
│  冲击波过于强大，给他点个赞
│
◇  Theme:
│  Default Theme + Customization
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
◇  Add a prefix for VitePress npm scripts?
│  Yes
│
◇  Prefix for VitePress npm scripts:
│  docs
│
└  Done! Now run npm run docs:dev and start writing.

Tips:
- Since you've chosen to customize the theme, you should also explicitly install vue as a dev dependency.

3. 测试

此时可以运行测试看是否安装成功：

pnpm run docs:dev

二、整合TailwindCSS

1.安装最新版的TailwindCSS包

pnpm add -D tailwindcss @tailwindcss/vite

注意：最新版的TailwindCSS安装以后不需要初始化命令和创建config文件。

2.配置tailwind并导入样式

修改 /docs/.vitepress/config.mts：

import { defineConfig } from 'vitepress'

import tailwindcss from '@tailwindcss/vite'   //此处导入



export default defineConfig({

  title: "冲击波",

  description: "过于强大的冲击波震撼到我了",

  themeConfig: {

    ...

  },

  vite: {

    plugins: [

       tailwindcss(),  //此处添加插件

    ]

  }

})

修改/docs/.vitepress/theme/style.css， 在头部导入：

@import "tailwindcss";

三、大功告成

修改/docs/index.md， 在底部加入代码

<h1 class="text-3xl font-bold underline"> 冲击波震撼人心! </h1>

测试一下：

pnpm run docs:dev

如果在网页底部看到text-3xl font-bold underline样式生效了：

此后，就可以在.md文件的html tag中开心的使用TailwindCSS类了。