学习[VuePress Theme Hope主题的Feed支持](Feed 支持 | vuepress-theme-hope)的官方文档的时候始终不得其法，最后终于试验出来了，成功使用Feed功能。

之前写了一个Memos的组件，里面是使用的TailwindCSS；后来又写了一个Vuepress热力图组件，因为想跟vuepress-theme-hope主题保持一致，发现TailwindCSS的样式跟主题样式有些冲突，索性干脆卸载了TailwindCSS，于是重写Memos组件也跟vuepress-theme-hope主题一样，可以使用主题的深色模式和主题色，这是就发现了一个问题纠结了两三天，Memos的内容循环使用DOM生成出来的，然而使用v-html渲染的DOM中的样式无法使用scoped中的样式,Vuepress生成的html里面都有个[data-v-*]之类的标识，导致不能使用scoped内的样式，查了好久才知道，这个时候就需要使用deep了，如下：

方法一

1. 安装评论插件和twikoo

   pnpm add -D @vuepress/plugin-comment twikoo

2. 配置twikoo 打开.vuepress/config.ts文件，引入import { commentPlugin } from '@vuepress/plugin-comment'

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: [],
   }
   2. 新建文件.vuepress/styles/index.scss

   // place your custom styles here
    @tailwind components;
    @tailwind utilities;
   3. 打开.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(),
                ],
                }
            },
            },
        }),
        
        });