Allow lead class to override element styles (#260)

* Allow lead to override element styles

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -11,6 +11,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add styles for `tfoot` elements ([#243](https://github.com/tailwindlabs/tailwindcss-typography/pull/243))
 
+## Fixed
+
+- Fix prose elements `legacy` mode ([#259](https://github.com/tailwindlabs/tailwindcss-typography/pull/259))
+- Allow `lead` class to override element styles ([#260](https://github.com/tailwindlabs/tailwindcss-typography/pull/260))
+
 ## [0.5.2] - 2022-02-14
 
 ### Fixed

src/index.js

@@ -91,7 +91,6 @@ module.exports = plugin.withOptions(
 
       for (let [name, selector = name] of [
         ['headings', 'h1, h2, h3, h4, th'],
-        ['lead', '[class~="lead"]'],
         ['h1'],
         ['h2'],
         ['h3'],
@@ -116,6 +115,7 @@ module.exports = plugin.withOptions(
         ['img'],
         ['video'],
         ['hr'],
+        ['lead', '[class~="lead"]'],
       ]) {
         addVariant(`${className}-${name}`, target === 'legacy' ? `& ${selector}` : `& :is(${inWhere(selector, options)})`)
       }

src/index.test.js

@@ -609,9 +609,6 @@ test('element variants', async () => {
           :is(:where(h1, h2, h3, h4, th):not(:where([class~='not-prose'] *))) {
           text-decoration-line: underline;
         }
-        .prose-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-prose'] *))) {
-          font-style: italic;
-        }
         .prose-h1\:text-3xl :is(:where(h1):not(:where([class~='not-prose'] *))) {
           font-size: 1.875rem;
           line-height: 2.25rem;
@@ -694,6 +691,9 @@ test('element variants', async () => {
         .prose-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-prose'] *))) {
           border-top-width: 2px;
         }
+        .prose-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-prose"] *))) {
+          font-style: italic;
+        }
       `
     )
   })
@@ -781,9 +781,6 @@ test('element variants with custom class name', async () => {
           :is(:where(h1, h2, h3, h4, th):not(:where([class~='not-markdown'] *))) {
           text-decoration-line: underline;
         }
-        .markdown-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-markdown'] *))) {
-          font-style: italic;
-        }
         .markdown-h1\:text-3xl :is(:where(h1):not(:where([class~='not-markdown'] *))) {
           font-size: 1.875rem;
           line-height: 2.25rem;
@@ -868,6 +865,9 @@ test('element variants with custom class name', async () => {
         .markdown-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-markdown'] *))) {
           border-top-width: 2px;
         }
+        .markdown-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-markdown"] *))) {
+          font-style: italic;
+        }
       `
     )
   })