Vuepress2安装Tailwindcss

集家嘴的壳玛🐸2024年8月14日小于 1 分钟

Vuepress2安装Tailwindcss

https://www.bilibili.com/video/BV1dy4y1Z7xS

安装依赖

pnpm add -D tailwindcss postcss autoprefixer

本地初始化安装tailwindcss
```
pnpx tailwindcss init
```

配置tailwindcss

打开tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './src/*.md',
        './src/.vuepress/**/*.{js,ts,jsx,tsx,vue}',
        './src/components/*.{js,ts,jsx,tsx,vue}',  // 添加这一行,我的配置文件是在components文件夹下
        ],
    theme: {
        extend: {},
    },
    plugins: [],
}

新建文件.vuepress/styles/index.scss

// place your custom styles here
 @tailwind components;
 @tailwind utilities;

打开.vuepress/config.js

//省略掉其他配置
 import TailwindCSS from "tailwindcss";
 import { viteBundler } from "@vuepress/bundler-vite";
 import Autoprefixer from "autoprefixer";

 export default defineUserConfig({
     //省略其他配置

     //配置打包工具
     bundler: viteBundler({
         viteOptions: {
         css: {
             postcss: {
             plugins: [
                 TailwindCSS(),
                 Autoprefixer(),
             ],
             }
         },
         },
     }),
     
     });