Skip to content

在Vitepress中引入TailwindCSS

sh
pnpm add -D tailwindcss postcss autoprefixer

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

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

export default config

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

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

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

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

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

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

引入iconify图标库

先安装iconifytailwind插件

sh
pnpm add -D @iconify/tailwind

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

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

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

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

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

MIT License