I am using TailwindCSS and its Typography plugin. In particular, I am using the prose class and trying to extend it.
The full code is here: https://codesandbox.io/s/heuristic-mayer-zxw2b?file=/tailwind.config.js&resolutionWidth=700&resolutionHeight=675
The container has prose sm:prose-lg so that prose-lg is applied after the sm breakpoint. I extend the prose classes so that a default color is applied and a second color is applied to children with a particular class (the selector is "> .lighter-color").
Below the sm breakpoint, the colors are #00a and #00f, as expected.
After the sm breakpoint, the colors should be changed to #0a0 and #0f0, respectively. The first color does change to #0a0 but the second color doesn't change.
For some reason, the "> .lighter-color" selector is included in prose but not in sm:prose-lg. I think it works for prose-lg so I suspect it might be a problem about the responsive variants.