VitePressv2.0 + TailwindCSSv4.1 集成方案

原文链接：VitePressv2.0 + TailwindCSSv4.1 集成方案 < Ping通途说

0. 前言

最近重拾继续维护ZZZStory的想法，在工作写全栈时，前端用的是这一套基础开源的后台模板：Vue.js eCommerce Dashboard | TailAdmin - Vue.js Tailwind CSS Dashboard Template

模板有些功能和组件只有Pro版才提供源码，于是就自己尝试还原前端和实现JS逻辑。以前还觉得TailwindCSS用着别扭，动不动就要去查文档，现在一看，妈呀真香！

那么能不能给ZZZStory这个以VitePress为基础的文档站也整上TailwindCSS？文档站停更原因一个就是样式复杂，手搓CSS真不喜欢；另一个在写剧情的全流程是：找别人录制的视频，人工抄录，然后润色，最后还要处理文档样式，真的超级麻烦。

看右侧密密麻麻的文字

所以慢慢来吧，看搜索此站流量还是有的，争取持续更新为爱发电捏

1. 如何实现？

参考资料：Migrating Our VitePress Blog to Tailwind CSS Version 4 - Estéban Soubiran

网络上大多都是旧时代那一套主css一堆@，然后postcss，tailwindcss.config.js

已经不适应新时代的TailwindCSS哩！

安装VitePress和TailwindCSS

bash 复制代码

npm add -D tailwindcss @tailwindcss/vite @tailwindcss/typography vitepress@next

若想要升级现有的，直接将代码的add替换成upgrade即可。

关于VitePress的安装教程在此处：快速开始 | VitePress

关于@tailwindcss/typography作用：一个官方出品用于提供更多排版功能的插件，特别适合Markdown、纯HTML的排版。

安装完成后确保你的package.json有以下内容：

javascript 复制代码

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.19",
    "@tailwindcss/vite": "^4.1.17",
    "tailwindcss": "^4.1.17",
    "vitepress": "^2.0.0-alpha.15",
  }
}

然后我们就可以前往src/docs/.vitepress/index.js中引用我们的TailwindCSS

javascript 复制代码

import { defineConfig } from "vitepress";
import Tailwind from '@tailwindcss/vite'

export default defineConfig({
  vite:{
    plugins: [Tailwind()],
  },
  
  title: "...",
  // 以及其他配置
  });

导入插件后，我们再前往src/docs/.vitepress/theme/custom.css（或者主CSS文件）中引用样式和typography插件：

css 复制代码

@import 'tailwindcss';
@config "../../tailwind.config.cjs";
@plugin "@tailwindcss/typography";
@source '../../../../src/**/*.md';
@source '../../../**/*.{vue,ts}';

.prose {
  --tw-prose-headings: var(--foreground-color);
  --tw-prose-body: var(--foreground-color);
}

最后记得在src/docs/.vitepress/theme/index.js导入css。

到此处应当结束了，但是我们引用了@tailwindcss/typography插件，所以原有的配置还是需要设置。

在src/docs中创建tailwind.config.cjs,输入以下内容以完成基本配置：

javascript 复制代码

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

  theme: {
    extend: {
      typography: {
      },
    },
  },
}

2. 大功告成！

此时应当完成了全部项目的安装，在Markdown中使用TailwindCSS可以发现也能触发Tailwind CSS IntelliSense - Visual Studio Marketplace 插件提示

看看实际效果！