在Vitepress中引入TailwindCSS

pnpm add -D tailwindcss postcss autoprefixer

①项目根目录创建tailwind.config.js和postcss.config.js文件

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const config = {
  content: ['./docs/.vitepress/**/*.{js,ts,vue}', './docs/**/*.md'],
}
export default config

postcss.config.js

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

export default config

②新建编辑docs/.vitepress/theme/tailwind.css，添加如下代码

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

@layer base {
  /* 添加自己的样式 */
}

③编辑docs/.vitepress/theme/index.ts(如果没有这个文件的话就手动创建)，添加如下代码

import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
// ...
import './tailwind.css'

export default {
  extends: DefaultTheme,
  // ...
} satisfies Theme

引入iconify图标库

先安装iconify的tailwind插件

pnpm add -D @iconify/tailwind

接着编辑根目录的tailwind.config.js

import { addDynamicIconSelectors } from '@iconify/tailwind'
/** @type {import('tailwindcss').Config} */
const config = {
  // ...
  plugins: [addDynamicIconSelectors()], 
}
export default config

图标字体我目前在Vitepress就安装了下面三种

pnpm add -D @iconify-json/devicon @iconify-json/logos @iconify-json/skill-icons

至于其他的根据自己的需求安装吧，详细的看官方文档