← 返回文章列表

tailwindcss


date: 2024-08-14 23:57 categories:

  • vuepress tags:
  • vuepress技巧

Vuepress2安装Tailwindcss

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

  1. 安装依赖
    pnpm add -D tailwindcss postcss autoprefixer
    
  2. 本地初始化安装tailwindcss
    pnpx tailwindcss init
    
  3. 配置tailwindcss
    1. 打开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: [],
    }
    
    1. 新建文件.vuepress/styles/index.scss
    // place your custom styles here
     @tailwind components;
     @tailwind utilities;
    
    1. 打开.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(),
                 ],
                 }
             },
             },
         }),
         
         });