diff --git a/CHANGELOG.md b/CHANGELOG.md index e3ed6c1..c775819 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix space between `
` and `
` ([#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 `` styles ([#314](https://github.com/tailwindlabs/tailwindcss-typography/pull/314))
 
 ## [0.5.9] - 2023-01-10
 
diff --git a/src/styles.js b/src/styles.js
index d5481b9..8856355 100644
--- a/src/styles.js
+++ b/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',