From 53a2a8d194e1e976775b6fdced7d54ea0aff78d1 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 5 Dec 2024 16:46:33 +0100 Subject: [PATCH 1/5] Add `prose-picture` and `prose-images` modifiers --- src/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.js b/src/index.js index d231d01..cf6ac6f 100644 --- a/src/index.js +++ b/src/index.js @@ -96,6 +96,8 @@ module.exports = plugin.withOptions( ['th'], ['td'], ['img'], + ['picture'], + ['images', 'img', 'picture'], ['video'], ['hr'], ['lead', '[class~="lead"]'], From 31e1e8c216409536a6e115cac11f46e981b053aa Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 5 Dec 2024 16:48:34 +0100 Subject: [PATCH 2/5] Readme: Add picture, images modifiers --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 954948c..cd6cbe4 100644 --- a/README.md +++ b/README.md @@ -187,6 +187,8 @@ 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-images:{utility}` | `img`, `picture` | | `prose-video:{utility}` | `video` | | `prose-hr:{utility}` | `hr` | From be8a7dfaed76d14baafb62c930fbbb57bdf8137f Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 18 Sep 2025 14:49:03 +0200 Subject: [PATCH 3/5] Remove `images` variant and add test for `prose-picture` variant --- src/index.js | 2 -- src/index.test.js | 6 ++++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index cf6ac6f..937756b 100644 --- a/src/index.js +++ b/src/index.js @@ -97,7 +97,6 @@ module.exports = plugin.withOptions( ['td'], ['img'], ['picture'], - ['images', 'img', 'picture'], ['video'], ['hr'], ['lead', '[class~="lead"]'], @@ -134,4 +133,3 @@ module.exports = plugin.withOptions( } } ) - diff --git a/src/index.test.js b/src/index.test.js index 8db6c6c..6713ba5 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -707,6 +707,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 " @@ -855,6 +856,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; From 3642149ec6365a75c077df63870879085d36e623 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 18 Sep 2025 14:49:36 +0200 Subject: [PATCH 4/5] Add changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 42654a0..2e0c64d 100644 --- a/CHANGELOG.md +++ b/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) From 4bec005fcead27d4c31612d5ad4874cf90cb8bba Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 18 Sep 2025 14:51:18 +0200 Subject: [PATCH 5/5] Update README --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index cd6cbe4..43163d8 100644 --- a/README.md +++ b/README.md @@ -188,7 +188,6 @@ Here's a complete list of available element modifiers: | `prose-td:{utility}` | `td` | | `prose-img:{utility}` | `img` | | `prose-picture:{utility}` | `picture` | -| `prose-images:{utility}` | `img`, `picture` | | `prose-video:{utility}` | `video` | | `prose-hr:{utility}` | `hr` | @@ -347,9 +346,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; } ```