本文环境

tailwindcss: v3.2.7

Vuepress: 2.0bate

可以参照 tailwindcss 官方使用 PostCss 安装，但不完全一样

安装依赖

安装tailwindcss, postcss, autoprefixer这个三个插件

1
$ npm install -D tailwindcss postcss autoprefixer

我们可以看到这三个插件已经装上了

1
2
3
4
5
6
7
// package.json
"devDependencies": {
  "autoprefixer": "^10.4.13",
  "postcss": "^8.4.21",
  "tailwindcss": "^3.2.7",
  ...
}

配置

配置postcss

按照平时我们要新建一个 postcss 的配置文件。但是这里要配置到vuepress的配置文件中的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// config.ts
import { defineUserConfig } from 'vuepress'
import { viteBundler } from '@vuepress/bundler-vite'
import autoprefixer from 'autoprefixer'
import Tailwindcss from 'tailwindcss'

export default defineUserConfig({
  
  ...
  
	 bundler:viteBundler({
    viteOptions: {
      css:{
        postcss: {
          plugins: [
            Tailwindcss(),
            autoprefixer()
          ]
        }
      }
    },
    vuePluginOptions: {},
  }),
})

这里参考的 vite 的配置文件。viteOptions 可以给 postcss 单独配置

配置tailwindcss

运行命令创建 tailwindcss 的配置文件

1
$ npx tailwindcss init

这是在根目录会生成一个 tailwind.config.js 文件

1
2
3
4
5
6
7
8
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./docs/.vuepress/theme-default/**/*.{vue,js,ts}"],
    theme: {
      extend: {},
    },
    plugins: [],
}

content 中配置的文件都会支持tailwind.css

添加Tailwind

将TailWind指令添加到CSS中

1
2
3
4
5
/** style/index.scss **/

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

到这里配置工作就完成了，我们可以愉快的使用TailWind了