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