如何在TailwindCSS中实现v-deep选择器效果以样式化Tiptap的.ProseMirror？

你可以用以下几种方式实现类似SCSS中v-deep的效果，给无法直接加类名的.ProseMirror设置Tailwind样式：

方法一：在scoped样式中结合深度选择器与@apply #

在Vue组件的scoped style标签里，用Vue的深度选择器（Vue2用::v-deep，Vue3用:deep()）包裹.ProseMirror，再通过@apply引入Tailwind工具类：

<style scoped>
.editor-content :deep(.ProseMirror) {
  @apply bg-gray-50 p-4 rounded-lg text-gray-800;
}
</style>

这种方式能确保样式只作用于当前组件内的编辑器，不会污染全局。

方法二：自定义Tailwind变体实现复用 #

如果需要在多个地方复用这套样式，可以在tailwind.config.js里自定义一个变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor: ['prose-mirror'],
      padding: ['prose-mirror'],
      borderRadius: ['prose-mirror'],
      // 按需添加你需要用到的样式属性变体
    },
  },
  plugins: [
    function ({ addVariant }) {
      addVariant('prose-mirror', ':deep(.ProseMirror)');
    },
  ],
};

之后在模板里就能直接用自定义变体类：

<template>
  <div class="editor-content prose-mirror:bg-gray-50 prose-mirror:p-4 prose-mirror:rounded-lg">
    <!-- Tiptap编辑器容器 -->
  </div>
</template>

方法三：全局样式直接设置 #

如果你的编辑器样式是全局通用的，可以在全局CSS文件（比如src/index.css）里直接写：

.editor-content .ProseMirror {
  @apply bg-gray-50 p-4 rounded-lg;
}

注意这种方式没有样式隔离，要避免和其他组件的样式冲突。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov