TailwindCSS 版式响应变体不包括扩展类选择器

Posted 2023-03-06

【中文标题】TailwindCSS 版式响应变体不包括扩展类选择器

【英文标题】：TailwindCSS Typography responsive variants not including extended class selector

【发布时间】：2021-06-02 21:09:00

【问题描述】：

我正在使用 TailwindCSS 及其 Typography 插件。特别是，我正在使用prose 类并尝试对其进行扩展。

完整代码在这里：https://codesandbox.io/s/heuristic-mayer-zxw2b?file=/tailwind.config.js&resolutionWidth=700&resolutionHeight=675

容器具有prose sm:prose-lg，以便在sm 断点之后应用prose-lg。我扩展了prose 类，以便应用默认颜色并将第二种颜色应用于具有特定类的子项（选择器为"> .lighter-color"）。

在sm 断点下方，颜色为#00a 和#00f，正如预期的那样。 在sm 断点之后，颜色应分别更改为#0a0 和#0f0。第一种颜色确实变为#0a0，但第二种颜色没有改变。

由于某种原因，"> .lighter-color" 选择器包含在 prose 中，但不包含在 sm:prose-lg 中。我认为它适用于prose-lg，所以我怀疑这可能是响应式变体的问题。

【参考方案1】：

事实证明这是 TailwindCSS 的问题，如 here 所述。