文章目录[隐藏]
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
npm add -D tailwindcss @tailwindcss/vite @tailwindcss/typography vitepress@next若想要升级现有的，直接将代码的add替换成upgrade即可。
关于VitePress的安装教程在此处：快速开始 | VitePress
关于@tailwindcss/typography作用：一个官方出品用于提供更多排版功能的插件，特别适合Markdown、纯HTML的排版。
安装完成后确保你的package.json有以下内容：
{
"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
import { defineConfig } from "vitepress";
import Tailwind from '@tailwindcss/vite'
export default defineConfig({
vite:{
plugins: [Tailwind()],
},
title: "...",
// 以及其他配置
});
导入插件后，我们再前往src/docs/.vitepress/theme/custom.css（或者主CSS文件）中引用样式和typography插件：
@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,输入以下内容以完成基本配置：
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
typography: {
},
},
},
}2. 大功告成！
此时应当完成了全部项目的安装，在Markdown中使用TailwindCSS可以发现也能触发Tailwind CSS IntelliSense - Visual Studio Marketplace 插件提示
看看实际效果！
发表回复