👤
VitePress 自定义页面
tailwindcss
Tailwind v4
1、安装依赖
bash
npm install -D tailwindcss @tailwindcss/vite2、修改 .vitepress/config.js 引入 Vite 插件
js
import { defineConfig } from 'vitepress'
import tailwind from '@tailwindcss/vite'
export default defineConfig({
vite: {
plugins: [tailwind()]
}
})3、新增 custom.css
css
@import "tailwindcss";4、引入到 .vitepress/theme/index.js
js
import './custom.css'5、使用案例
写一个诗歌的卡片PoemCard.md
PoemCard.md 代码
md
[//]: # (<!DOCTYPE html>)
[//]: # (<html lang="zh-CN" class="dark">)
[//]: # (<head>)
[//]: # ( <meta charset="UTF-8">)
[//]: # ( <title>诗歌卡片</title>)
[//]: # ( <!-- 引入Tailwind CDN -->)
[//]: # ( <script src="https://cdn.tailwindcss.com"></script>)
[//]: # (</head>)
<body class="min-h-screen p-10 bg-slate-50 dark:bg-slate-900">
<div class="w-full max-w-md mx-auto rounded-2xl p-6 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1
bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
<div class="flex justify-between items-start mb-4">
<p class="text-2xl font-bold text-rose-600 dark:text-rose-400 tracking-wide">水调歌头·明月几时有</p>
<span class="px-2 py-1 rounded text-xs font-medium bg-rose-100 dark:bg-rose-900 text-rose-700 dark:text-rose-200">宋</span>
</div>
<p class="text-slate-500 dark:text-slate-400 mb-5 text-sm">作者：苏轼</p>
<div class="space-y-3 py-4 border-y border-dashed border-slate-200 dark:border-slate-600">
<p class="text-center text-lg text-slate-800 dark:text-slate-100 font-serif leading-relaxed">明月几时有？把酒问青天。</p>
<p class="text-center text-lg text-slate-800 dark:text-slate-100 font-serif leading-relaxed">不知天上宫阙，今夕是何年。</p>
<p class="text-center text-lg text-slate-800 dark:text-slate-100 font-serif leading-relaxed">我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p>
<p class="text-center text-lg text-slate-800 dark:text-slate-100 font-serif leading-relaxed">起舞弄清影，何似在人间。</p>
<p class="text-center text-lg text-slate-800 dark:text-slate-100 font-serif leading-relaxed">转朱阁，低绮户，照无眠。</p>
<p class="text-center text-lg text-slate-800 dark:text-slate-100 font-serif leading-relaxed">不应有恨，何事长向别时圆？</p>
<p class="text-center text-lg text-slate-800 dark:text-slate-100 font-serif leading-relaxed">人有悲欢离合，月有阴晴圆缺，此事古难全。</p>
<p class="text-center text-lg text-slate-800 dark:text-slate-100 font-serif leading-relaxed">但愿人长久，千里共婵娟。</p>
</div>
<div class="mt-5 flex flex-wrap gap-2">
<span class="text-sm font-medium text-slate-600 dark:text-slate-300">标签：</span>
<span class="px-2 py-0.5 rounded-full text-xs bg-sky-100 dark:bg-sky-900 text-sky-700 dark:text-sky-200">中秋</span>
<span class="px-2 py-0.5 rounded-full text-xs bg-sky-100 dark:bg-sky-900 text-sky-700 dark:text-sky-200">宋词</span>
<span class="px-2 py-0.5 rounded-full text-xs bg-sky-100 dark:bg-sky-900 text-sky-700 dark:text-sky-200">怀人</span>
<span class="px-2 py-0.5 rounded-full text-xs bg-sky-100 dark:bg-sky-900 text-sky-700 dark:text-sky-200">月亮</span>
</div>
<div class="mt-4 pt-4 border-t border-slate-100 dark:border-slate-700">
<p class="text-sm font-semibold text-slate-700 dark:text-slate-200 mb-2">诗文赏析</p>
<p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
中秋望月怀人之作，词人借月亮的圆缺喻人间离合，从伤感离别转为豁达祝愿，最后一句成为千古祝福名句。
</p>
</div>
</div>
</body>
[//]: # (</html>)输出
水调歌头·明月几时有
宋作者：苏轼
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年。
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间。
转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
标签：中秋宋词怀人月亮
诗文赏析
中秋望月怀人之作，词人借月亮的圆缺喻人间离合，从伤感离别转为豁达祝愿，最后一句成为千古祝福名句。
集成Element-Plus
安装依赖
bash
# 安装 element-plus
npm install element-plus
# 图标（可选）
npm install @element-plus/icons-vue
# 自动导入所需插件（可选，推荐，不用手动逐个import组件）
npm install -D unplugin-vue-components unplugin-auto-import在.vitepress/theme/index.ts中导入使用
ts
// 补充缺失导入
import DefaultTheme from 'vitepress/theme'
import { h } from 'vue'
import ElementPlus from 'element-plus'
// 全局引入Element Plus完整样式
import 'element-plus/dist/index.css'
const Theme = DefaultTheme
export default {
extends: Theme,
Layout: () => {
// 保留VitePress默认布局插槽
return h(Theme.Layout, null, {
// 你可以在这里自定义插槽：hero、doc-before、footer等
})
},
enhanceApp({ app, router, siteData }) {
// 全局挂载ElementPlus，全局所有md页面、自定义组件均可直接使用el-xxx组件
app.use(ElementPlus)
}
}