Add prose-picture modifiers (#367)

Author: tordans

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Add `prose-picture` modifier ([#367](https://github.com/tailwindlabs/tailwindcss-typography/pull/367))
+
 ### Fixed
 
 - Include unit in `hr` border-width value ([#379](https://github.com/tailwindlabs/tailwindcss-typography/pull/379)

README.md

@@ -190,6 +190,7 @@ Here's a complete list of available element modifiers:
 | `prose-th:{utility}`         | `th`                         |
 | `prose-td:{utility}`         | `td`                         |
 | `prose-img:{utility}`        | `img`                        |
+| `prose-picture:{utility}`    | `picture`                    |
 | `prose-video:{utility}`      | `video`                      |
 | `prose-hr:{utility}`         | `hr`                         |
 
@@ -348,9 +349,9 @@ See our internal [style definitions](https://github.com/tailwindlabs/tailwindcss
 If you need to use a class name other than `prose` for any reason, you can do so using the `className` option when registering the plugin:
 
 ```css
-@import "tailwindcss";
+@import 'tailwindcss';
 @plugin "@tailwindcss/typography" {
-  className: wysiwyg;
+  classname: wysiwyg;
 }
 ```
 

src/index.js

@@ -99,6 +99,7 @@ module.exports = plugin.withOptions(
         ['th'],
         ['td'],
         ['img'],
+        ['picture'],
         ['video'],
         ['hr'],
         ['lead', '[class~="lead"]'],
@@ -135,4 +136,3 @@ module.exports = plugin.withOptions(
     }
   }
 )
-

src/index.test.js

@@ -710,6 +710,7 @@ test('element variants', async () => {
             prose-th:text-left
             prose-td:align-center
             prose-img:rounded-lg
+            prose-picture:my-8
             prose-video:my-12
             prose-hr:border-t-2
         "
@@ -868,6 +869,11 @@ test('element variants', async () => {
           :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           border-radius: 0.5rem;
         }
+        .prose-picture\:my-8
+          :is(:where(picture):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
+          margin-top: 2rem;
+          margin-bottom: 2rem;
+        }
         .prose-video\:my-12
           :is(:where(video):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           margin-top: 3rem;