Tailwind CSS如何使用.class选择器？从Ant Design（LESS）迁移的疑问

完全可以在Tailwind里实现你要的效果，给你几个实用方案：

方案1：用Tailwind的@layer指令写自定义样式 #

这是最贴合Tailwind工作流的方式，你可以在项目的全局CSS文件（比如globals.css）里用@layer components来编写，Tailwind会自动处理样式优先级和打包优化：

@layer components {
  .container [class*="ql-container"] {
    @apply min-h-[100px] max-h-[200px] overflow-y-auto rounded-bl-lg rounded-br-lg;
  }

  .container [class*="ql-toolbar"] {
    @apply rounded-tl-lg rounded-tr-lg;
  }
}

这里用@apply把Tailwind工具类组合起来，逻辑和你原来的LESS代码完全一致，同时能融入Tailwind的样式体系。

方案2：直接在HTML里用Tailwind任意变体（适合简单场景） #

如果你的.container是直接写在HTML元素上的类，也可以用Tailwind的任意变体直接定位子元素：

<div class="container [&_[class*='ql-container']]:min-h-[100px] [&_[class*='ql-container']]:max-h-[200px] [&_[class*='ql-container']]:overflow-y-auto [&_[class*='ql-container']]:rounded-bl-lg [&_[class*='ql-container']]:rounded-br-lg [&_[class*='ql-toolbar']]:rounded-tl-lg [&_[class*='ql-toolbar']]:rounded-tr-lg">
  <!-- 富文本编辑器内容 -->
</div>

不过这种写法样式多了会很冗长，更适合简单的样式覆盖场景。

方案3：继续使用纯CSS/LESS #

Tailwind完全兼容原生CSS和预处理器，如果你习惯原来的写法，直接保留对应的LESS/CSS文件即可，不需要强制改成Tailwind的写法。你的原代码可以直接放到项目样式文件里，和Tailwind样式共存生效。

总结：想贴合Tailwind生态优先选方案1；简单场景用方案2；不想改变原有习惯，方案3完全可行，Tailwind不会限制你的原有开发方式。

内容的提问来源于stack exchange，提问作者Teo