Add <picture> styles (tailwindlabs#314)

* Add `<picture>` styles

* Update changelog

Author: reinink

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix space between `<figcaption>` and `<pre>` ([#313](https://github.com/tailwindlabs/tailwindcss-typography/pull/313))
 - Remove typography styles from `not-prose` elements in addition to their children ([#301](https://github.com/tailwindlabs/tailwindcss-typography/pull/301))
+- Add `<picture>` styles ([#314](https://github.com/tailwindlabs/tailwindcss-typography/pull/314))
 
 ## [0.5.9] - 2023-01-10
 

src/styles.js

@@ -56,6 +56,14 @@ let defaultModifiers = {
           marginTop: em(24, 14),
           marginBottom: em(24, 14),
         },
+        picture: {
+          marginTop: em(24, 14),
+          marginBottom: em(24, 14),
+        },
+        'picture > img': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
         video: {
           marginTop: em(24, 14),
           marginBottom: em(24, 14),
@@ -234,6 +242,14 @@ let defaultModifiers = {
           marginTop: em(32, 16),
           marginBottom: em(32, 16),
         },
+        picture: {
+          marginTop: em(32, 16),
+          marginBottom: em(32, 16),
+        },
+        'picture > img': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
         video: {
           marginTop: em(32, 16),
           marginBottom: em(32, 16),
@@ -412,6 +428,14 @@ let defaultModifiers = {
           marginTop: em(32, 18),
           marginBottom: em(32, 18),
         },
+        picture: {
+          marginTop: em(32, 18),
+          marginBottom: em(32, 18),
+        },
+        'picture > img': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
         video: {
           marginTop: em(32, 18),
           marginBottom: em(32, 18),
@@ -590,6 +614,14 @@ let defaultModifiers = {
           marginTop: em(40, 20),
           marginBottom: em(40, 20),
         },
+        picture: {
+          marginTop: em(40, 20),
+          marginBottom: em(40, 20),
+        },
+        'picture > img': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
         video: {
           marginTop: em(40, 20),
           marginBottom: em(40, 20),
@@ -768,6 +800,14 @@ let defaultModifiers = {
           marginTop: em(48, 24),
           marginBottom: em(48, 24),
         },
+        picture: {
+          marginTop: em(48, 24),
+          marginBottom: em(48, 24),
+        },
+        'picture > img': {
+          marginTop: '0',
+          marginBottom: '0',
+        },
         video: {
           marginTop: em(48, 24),
           marginBottom: em(48, 24),
@@ -1350,6 +1390,9 @@ module.exports = {
           color: 'inherit',
         },
         img: {}, // Required to maintain correct order when merging
+        picture: {
+          display: 'block',
+        },
         code: {
           color: 'var(--tw-prose-code)',
           fontWeight: '600',