在Vue3中，样式私有化是通过<style scoped>标记实现的，而非CSS Modules。scoped属性会自动将组件样式限定在组件的作用域内，避免样式污染其他组件。

例如，一个简单的组件如下所示：

<template>
  <div class="wrapper">
    <p class="message">{{ message }}</p>
  </div>
</template>

<style scoped>
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.message {
  font-size: 16px;
  color: blue;
}
</style>
复制

在这个组件中，.wrapper和.message样式只会应用于该组件内部，并不会影响到其他组件或全局样式。

在Vue3中，/deep/选择器已被废弃，而>>>和::v-deep选择器则不再被支持。相反，Vue3推荐使用::v-slots和::v-deep选择器来实现样式穿透。

例如，假设我们有一个子组件ChildComponent，它包含一个<button>元素，我们想要在父组件中修改该按钮的样式。我们可以使用::v-slots选择器来选择子组件的插槽，并使用::v-deep选择器来选择按钮元素，如下所示：

<!-- 子组件 ChildComponent -->
<template>
  <div>
    <slot></slot>
    <button>Click me!</button>
  </div>
</template>

<!-- 父组件 ParentComponent -->
<template>
  <div>
    <ChildComponent>
      <template #default>
        <button class="my-button">Click me instead!</button>
      </template>
    </ChildComponent>
  </div>
</template>

<style scoped>
::v-slots(button) ::v-deep(button) {
  background-color: red;
  color: white;
}
</style>
复制

在上面的代码中，我们使用::v-slots(button)选择器来选择子组件中的插槽，并使用::v-deep(button)选择器来选择按钮元素。然后，我们在样式中应用了一些样式，来修改按钮的背景色和文本颜色。

需要注意的是，::v-slots和::v-deep选择器只能在具有作用域的样式中使用，例如<style scoped>或通过CSS Modules，否则这些选择器将不起作用。

在使用第三方库组件时，如果我们想要自定义修改原有的组件样式，可以通过以下几种方式实现：

• 使用CSS选择器

我们可以使用CSS选择器来选择第三方组件中的元素，并修改其样式。例如，假设我们想要修改antd库中的Button组件的样式，可以使用如下代码：

button.ant-btn {
  background-color: red;
  color: white;
}
复制

在上面的代码中，我们使用了.ant-btn类选择器来选择Button组件的元素，并修改了其背景色和文本颜色。

需要注意的是，使用CSS选择器可能会导致样式污染的问题，特别是在全局样式中使用时。因此，我们应该尽量避免使用全局样式选择器，而是使用具有作用域的样式，例如<style scoped>或CSS Modules。

• 使用CSS Modules

如果我们使用了CSS Modules来管理组件的样式，可以通过定义自己的类名，并使用:class指令来覆盖第三方组件的样式。例如，假设我们想要修改antd库中的Button组件的样式，可以使用如下代码：

<template>
  <div>
    <button class="my-button" :class="$style.button">Click me!</button>
  </div>
</template>

<style module>
.my-button {
  background-color: red;
  color: white;
}
</style>
复制

在上面的代码中，我们定义了一个.my-button类名，并在模板中使用:class="$style.button"指令来覆盖Button组件的样式。

需要注意的是，使用CSS Modules需要在构建工具中进行配置，并需要使用特定的语法来定义样式类名。同时，也需要注意样式的优先级，确保我们的样式能够正确地覆盖第三方组件的样式。

• 使用自定义主题

有些第三方组件库可能提供了自定义主题的功能，我们可以通过修改主题变量来修改组件的样式。例如，Element-UI库就提供了自定义主题的功能，我们可以通过修改主题变量来修改组件的颜色、字体等属性。

需要注意的是，使用自定义主题需要了解第三方组件库的主题系统，并按照其规定来修改主题变量。同时，也需要注意主题变量的优先级，确保我们的样式能够正确地覆盖第三方组件的样式。

参考：Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS是一个基于原子类的CSS框架，它提供了一组预定义的CSS类，可以用于快速构建界面。

与其他CSS框架不同，Tailwind CSS并不是基于组件的，而是基于原子类的。它提供了一组小而独立的CSS类，每个类都对应一个具体的样式，例如颜色、字体、间距等。通过组合这些原子类，我们可以快速地构建出各种复杂的界面。

例如，要创建一个带有蓝色背景、白色文本、20像素内边距和10像素圆角的按钮，我们可以使用如下代码：

<button class="bg-blue-500 text-white p-4 rounded-lg">Click me!</button>
复制

在上面的代码中，我们使用了.bg-blue-500类来设置背景色，.text-white类来设置文本颜色，.p-4类来设置内边距，.rounded-lg类来设置圆角。通过这些原子类的组合，我们可以快速地创建出一个按钮。

Tailwind CSS的优点在于，它提供了丰富的原子类，可以覆盖大部分常见的样式需求。同时，它也提供了一些实用的工具类，例如flex、grid、transition等，可以用于快速布局和动画效果。

需要注意的是，由于Tailwind CSS提供了大量的样式类，因此它的CSS文件相对较大。同时，由于每个样式都是通过原子类来实现的，因此在使用时需要注意原子类的组合方式，以避免样式冲突和重复。