• 使用方法
• 杂项

在 VitePress 中使用 Tailwind CSS 时需使用 PostCSS 配置

使用方法

安装 Tailwind CSS

pnpm

pnpm install -D tailwindcss

npm

npm install -D tailwindcss

yarn

yarn add -D tailwindcss

注意

VitePress 底层集成了 PostCSS 无需显现性引入

添加配置

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = { 
  content: ['./.vitepress/theme/**/*.vue'], 
  // 需要tailwind css覆盖到位置
  theme: { 
    extend: {}, 
  }, 
  plugins: [], 
} 

postcss.config.js

/** postcss.config.js */
import tailwind from 'tailwindcss'

export default { 
  plugins: [ 
    tailwind(), 
  ], 
} 

style.css

/** style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

输入：

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

输出：

Hello world!

杂项

Tailwind CSS 插件

跳转Tailwind CSS or VS Code

VS Code设置

设置默认 css 格式为 tailwind css，在 .vscode/settings.json 中添加

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}