CODEWITHSUNDEEP
tailwind-css
tmwilliamlin168
tmwilliamlin168

Reputation: 571

TailwindCSS Typography responsive variants not including extended class selector

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.

Upvotes: 2

Views: 1001

Answers (1)

tmwilliamlin168
tmwilliamlin168

Reputation: 571

It turns out that this is an issue with TailwindCSS, as described here.

Upvotes: 1

Related Questions