From d1e6421d4c07c15b3e1db6b6b10549df96fb129d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 28 Jan 2025 13:40:22 -0500 Subject: [PATCH 01/20] Update README.md --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index a4d73c5..f5d5f96 100644 --- a/README.md +++ b/README.md @@ -381,6 +381,30 @@ module.exports = { } ``` +Note that for certain keys the `theme` function can return a tuple (like for `theme('fontSize.lg')` for example. In these situations, you should make sure to grab the specific part of the tuple you need: + +```js {{ filename: 'tailwind.config.js' }} +/** @type {import('tailwindcss').Config} */ +module.exports = { + theme: { + extend: { + typography: (theme) => ({ + DEFAULT: { + css: { + fontSize: theme('fontSize.base')[0], + // ... + }, + }, + }), + }, + }, + plugins: [ + require('@tailwindcss/typography'), + // ... + ], +} +``` + Customizations should be applied to a specific modifier like `DEFAULT` or `xl`, and must be added under the `css` property. Customizations are authored in the same [CSS-in-JS syntax](https://tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind plugins. See [the default styles](https://github.com/tailwindlabs/tailwindcss-typography/blob/main/src/styles.js) for this plugin for more in-depth examples of configuring each modifier. From 43a4c2c2fa1932a9b39f84188b2a6bef6e1a0131 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 10 Feb 2025 11:26:37 +0100 Subject: [PATCH 02/20] Update README for Tailwind CSS v4 (#380) --- README.md | 155 +++++++++++++++++++----------------------------------- 1 file changed, 55 insertions(+), 100 deletions(-) diff --git a/README.md b/README.md index f5d5f96..eadc5e0 100644 --- a/README.md +++ b/README.md @@ -26,19 +26,11 @@ Install the plugin from npm: npm install -D @tailwindcss/typography ``` -Then add the plugin to your `tailwind.config.js` file: +Then add the plugin to your main `style.css` file: -```js -/** @type {import('tailwindcss').Config} */ -module.exports = { - theme: { - // ... - }, - plugins: [ - require('@tailwindcss/typography'), - // ... - ], -} +```diff + @import "tailwindcss"; ++ @plugin "tailwindcss/typography"; ``` --- @@ -189,7 +181,7 @@ When stacking these modifiers with other modifiers like `hover`, you most likely
{{ markdown }}
``` -Read the Tailwind CSS documentation on [ordering stacked modifiers](https://tailwindcss.com/docs/hover-focus-and-other-states#ordering-stacked-modifiers) to learn more. +Read the Tailwind CSS documentation on [stacked modifiers](https://tailwindcss.com/docs/hover-focus-and-other-states) to learn more. ### Overriding max-width @@ -234,7 +226,15 @@ Note that you can't nest new `prose` instances within a `not-prose` block at thi ### Adding custom color themes -You can create your own color theme by adding a new key in the `typography` section of your `tailwind.config.js` file and providing your colors under the `css` key: +To customize the color theme beyond simple CSS overrides, you can use the JavaScript based theme API. To do that, use the `@config` directive: + +```diff + @import "tailwindcss"; + @plugin "@tailwindcss/typography"; ++ @config "./tailwind.config.js"; +``` + +You can then create your own color theme by adding a new `tailwind.config.js` file with the `typography` section and providing your colors under the `css` key: ```js {{ filename: 'tailwind.config.js' }} /** @type {import('tailwindcss').Config} */ @@ -244,47 +244,43 @@ module.exports = { typography: ({ theme }) => ({ pink: { css: { - '--tw-prose-body': theme('colors.pink[800]'), - '--tw-prose-headings': theme('colors.pink[900]'), - '--tw-prose-lead': theme('colors.pink[700]'), - '--tw-prose-links': theme('colors.pink[900]'), - '--tw-prose-bold': theme('colors.pink[900]'), - '--tw-prose-counters': theme('colors.pink[600]'), - '--tw-prose-bullets': theme('colors.pink[400]'), - '--tw-prose-hr': theme('colors.pink[300]'), - '--tw-prose-quotes': theme('colors.pink[900]'), - '--tw-prose-quote-borders': theme('colors.pink[300]'), - '--tw-prose-captions': theme('colors.pink[700]'), - '--tw-prose-code': theme('colors.pink[900]'), - '--tw-prose-pre-code': theme('colors.pink[100]'), - '--tw-prose-pre-bg': theme('colors.pink[900]'), - '--tw-prose-th-borders': theme('colors.pink[300]'), - '--tw-prose-td-borders': theme('colors.pink[200]'), - '--tw-prose-invert-body': theme('colors.pink[200]'), - '--tw-prose-invert-headings': theme('colors.white'), - '--tw-prose-invert-lead': theme('colors.pink[300]'), - '--tw-prose-invert-links': theme('colors.white'), - '--tw-prose-invert-bold': theme('colors.white'), - '--tw-prose-invert-counters': theme('colors.pink[400]'), - '--tw-prose-invert-bullets': theme('colors.pink[600]'), - '--tw-prose-invert-hr': theme('colors.pink[700]'), - '--tw-prose-invert-quotes': theme('colors.pink[100]'), - '--tw-prose-invert-quote-borders': theme('colors.pink[700]'), - '--tw-prose-invert-captions': theme('colors.pink[400]'), - '--tw-prose-invert-code': theme('colors.white'), - '--tw-prose-invert-pre-code': theme('colors.pink[300]'), + '--tw-prose-body': 'var(--color-pink-800)'), + '--tw-prose-headings': 'var(--color-pink-900)'), + '--tw-prose-lead': 'var(--color-pink-700)'), + '--tw-prose-links': 'var(--color-pink-900)'), + '--tw-prose-bold': 'var(--color-pink-900)'), + '--tw-prose-counters': 'var(--color-pink-600)'), + '--tw-prose-bullets': 'var(--color-pink-400)'), + '--tw-prose-hr': 'var(--color-pink-300)'), + '--tw-prose-quotes': 'var(--color-pink-900)'), + '--tw-prose-quote-borders': 'var(--color-pink-300)'), + '--tw-prose-captions': 'var(--color-pink-700)'), + '--tw-prose-code': 'var(--color-pink-900)'), + '--tw-prose-pre-code': 'var(--color-pink-100)'), + '--tw-prose-pre-bg': 'var(--color-pink-900)'), + '--tw-prose-th-borders': 'var(--color-pink-300)'), + '--tw-prose-td-borders': 'var(--color-pink-200)'), + '--tw-prose-invert-body': 'var(--color-pink-200)'), + '--tw-prose-invert-headings': 'var(--color-white)', + '--tw-prose-invert-lead': 'var(--color-pink-300)'), + '--tw-prose-invert-links': 'var(--color-white)', + '--tw-prose-invert-bold': 'var(--color-white)', + '--tw-prose-invert-counters': 'var(--color-pink-400)'), + '--tw-prose-invert-bullets': 'var(--color-pink-600)'), + '--tw-prose-invert-hr': 'var(--color-pink-700)'), + '--tw-prose-invert-quotes': 'var(--color-pink-100)'), + '--tw-prose-invert-quote-borders': 'var(--color-pink-700)'), + '--tw-prose-invert-captions': 'var(--color-pink-400)'), + '--tw-prose-invert-code': 'var(--color-white)', + '--tw-prose-invert-pre-code': 'var(--color-pink-300)'), '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', - '--tw-prose-invert-th-borders': theme('colors.pink[600]'), - '--tw-prose-invert-td-borders': theme('colors.pink[700]'), + '--tw-prose-invert-th-borders': 'var(--color-pink-600)'), + '--tw-prose-invert-td-borders': 'var(--color-pink-700)'), }, }, }), }, }, - plugins: [ - require('@tailwindcss/typography'), - // ... - ], } ``` @@ -294,18 +290,10 @@ 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: -```js {{ filename: 'tailwind.config.js' }} -/** @type {import('tailwindcss').Config} */ -module.exports = { - theme: { - // ... - }, - plugins: [ - require('@tailwindcss/typography')({ - className: 'wysiwyg', - }), - ] - ... +```css +@import "tailwindcss"; +@plugin "@tailwindcss/typography" { + className: wysiwyg; } ``` @@ -327,7 +315,7 @@ Now every instance of `prose` in the default class names will be replaced by you ### Customizing the CSS -If you want to customize the raw CSS generated by this plugin, add your overrides under the `typography` key in the `theme` section of your `tailwind.config.js` file: +If you want to customize the raw CSS generated by this plugin, first follow the steps from [adding custom color themes](#adding-custom-color-themes) to set up a JavaScript based configuration API and then add your overrides under the `typography` key in the `theme` section of your `tailwind.config.js` file: ```js {{ filename: 'tailwind.config.js' }} /** @type {import('tailwindcss').Config} */ @@ -349,63 +337,30 @@ module.exports = { }, }, }, - plugins: [ - require('@tailwindcss/typography'), - // ... - ], -} -``` - -Like with all theme customizations in Tailwind, you can also define the `typography` key as a function if you need access to the `theme` helper: - -```js {{ filename: 'tailwind.config.js' }} -/** @type {import('tailwindcss').Config} */ -module.exports = { - theme: { - extend: { - typography: (theme) => ({ - DEFAULT: { - css: { - color: theme('colors.gray.800'), - - // ... - }, - }, - }), - }, - }, - plugins: [ - require('@tailwindcss/typography'), - // ... - ], } ``` -Note that for certain keys the `theme` function can return a tuple (like for `theme('fontSize.lg')` for example. In these situations, you should make sure to grab the specific part of the tuple you need: +Like with all theme customizations in Tailwind, you can use CSS variables if you need access to access your theme configuration: ```js {{ filename: 'tailwind.config.js' }} /** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { - typography: (theme) => ({ + typography: { DEFAULT: { css: { - fontSize: theme('fontSize.base')[0], + color: 'var(--color-gray-800)', // ... }, }, - }), + }, }, }, - plugins: [ - require('@tailwindcss/typography'), - // ... - ], } ``` -Customizations should be applied to a specific modifier like `DEFAULT` or `xl`, and must be added under the `css` property. Customizations are authored in the same [CSS-in-JS syntax](https://tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind plugins. +Customizations should be applied to a specific modifier like `DEFAULT` or `xl`, and must be added under the `css` property. Customizations are authored in the same [CSS-in-JS syntax](https://v3.tailwindcss.com/docs/plugins#css-in-js-syntax) used to write Tailwind v3 plugins. See [the default styles](https://github.com/tailwindlabs/tailwindcss-typography/blob/main/src/styles.js) for this plugin for more in-depth examples of configuring each modifier. From fb252ece730f228dfc9ae1c61de79c3ac0025d5c Mon Sep 17 00:00:00 2001 From: Michael Thomas Date: Mon, 10 Feb 2025 18:47:57 +0100 Subject: [PATCH 03/20] Fix syntax errors in Readme.md (#381) --- README.md | 54 +++++++++++++++++++++++++++--------------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index eadc5e0..7732698 100644 --- a/README.md +++ b/README.md @@ -244,38 +244,38 @@ module.exports = { typography: ({ theme }) => ({ pink: { css: { - '--tw-prose-body': 'var(--color-pink-800)'), - '--tw-prose-headings': 'var(--color-pink-900)'), - '--tw-prose-lead': 'var(--color-pink-700)'), - '--tw-prose-links': 'var(--color-pink-900)'), - '--tw-prose-bold': 'var(--color-pink-900)'), - '--tw-prose-counters': 'var(--color-pink-600)'), - '--tw-prose-bullets': 'var(--color-pink-400)'), - '--tw-prose-hr': 'var(--color-pink-300)'), - '--tw-prose-quotes': 'var(--color-pink-900)'), - '--tw-prose-quote-borders': 'var(--color-pink-300)'), - '--tw-prose-captions': 'var(--color-pink-700)'), - '--tw-prose-code': 'var(--color-pink-900)'), - '--tw-prose-pre-code': 'var(--color-pink-100)'), - '--tw-prose-pre-bg': 'var(--color-pink-900)'), - '--tw-prose-th-borders': 'var(--color-pink-300)'), - '--tw-prose-td-borders': 'var(--color-pink-200)'), - '--tw-prose-invert-body': 'var(--color-pink-200)'), + '--tw-prose-body': 'var(--color-pink-800)', + '--tw-prose-headings': 'var(--color-pink-900)', + '--tw-prose-lead': 'var(--color-pink-700)', + '--tw-prose-links': 'var(--color-pink-900)', + '--tw-prose-bold': 'var(--color-pink-900)', + '--tw-prose-counters': 'var(--color-pink-600)', + '--tw-prose-bullets': 'var(--color-pink-400)', + '--tw-prose-hr': 'var(--color-pink-300)', + '--tw-prose-quotes': 'var(--color-pink-900)', + '--tw-prose-quote-borders': 'var(--color-pink-300)', + '--tw-prose-captions': 'var(--color-pink-700)', + '--tw-prose-code': 'var(--color-pink-900)', + '--tw-prose-pre-code': 'var(--color-pink-100)', + '--tw-prose-pre-bg': 'var(--color-pink-900)', + '--tw-prose-th-borders': 'var(--color-pink-300)', + '--tw-prose-td-borders': 'var(--color-pink-200)', + '--tw-prose-invert-body': 'var(--color-pink-200)', '--tw-prose-invert-headings': 'var(--color-white)', - '--tw-prose-invert-lead': 'var(--color-pink-300)'), + '--tw-prose-invert-lead': 'var(--color-pink-300)', '--tw-prose-invert-links': 'var(--color-white)', '--tw-prose-invert-bold': 'var(--color-white)', - '--tw-prose-invert-counters': 'var(--color-pink-400)'), - '--tw-prose-invert-bullets': 'var(--color-pink-600)'), - '--tw-prose-invert-hr': 'var(--color-pink-700)'), - '--tw-prose-invert-quotes': 'var(--color-pink-100)'), - '--tw-prose-invert-quote-borders': 'var(--color-pink-700)'), - '--tw-prose-invert-captions': 'var(--color-pink-400)'), + '--tw-prose-invert-counters': 'var(--color-pink-400)', + '--tw-prose-invert-bullets': 'var(--color-pink-600)', + '--tw-prose-invert-hr': 'var(--color-pink-700)', + '--tw-prose-invert-quotes': 'var(--color-pink-100)', + '--tw-prose-invert-quote-borders': 'var(--color-pink-700)', + '--tw-prose-invert-captions': 'var(--color-pink-400)', '--tw-prose-invert-code': 'var(--color-white)', - '--tw-prose-invert-pre-code': 'var(--color-pink-300)'), + '--tw-prose-invert-pre-code': 'var(--color-pink-300)', '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', - '--tw-prose-invert-th-borders': 'var(--color-pink-600)'), - '--tw-prose-invert-td-borders': 'var(--color-pink-700)'), + '--tw-prose-invert-th-borders': 'var(--color-pink-600)', + '--tw-prose-invert-td-borders': 'var(--color-pink-700)', }, }, }), From 0ab25dc0ff97505a75c966d3f9a020cd8a543ceb Mon Sep 17 00:00:00 2001 From: Manas Sharma Date: Tue, 11 Feb 2025 00:07:26 +0530 Subject: [PATCH 04/20] Fix plugin import path in README.md (#382) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7732698..5d89307 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ Then add the plugin to your main `style.css` file: ```diff @import "tailwindcss"; -+ @plugin "tailwindcss/typography"; ++ @plugin "@tailwindcss/typography"; ``` --- From 1a6972e6902df5ff63c85399e0418cbfce7855fb Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Tue, 11 Feb 2025 18:14:20 +0100 Subject: [PATCH 05/20] Rectify variant order Closes #376 --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5d89307..fcb4fb4 100644 --- a/README.md +++ b/README.md @@ -175,7 +175,13 @@ Here's a complete list of available element modifiers: | `prose-video:{utility}` | `video` | | `prose-hr:{utility}` | `hr` | -When stacking these modifiers with other modifiers like `hover`, you most likely want the other modifier to come first: +When stacking these modifiers with other modifiers like `hover`, you most likely want the other modifier to come last: + +```html +
{{ markdown }}
+``` + +If you are still using in Tailwind CSS v3, the modifier order is the opposite: ```html
{{ markdown }}
From 3e75cb04808f80b0e30b8c6fad2e4212917b194f Mon Sep 17 00:00:00 2001 From: Rahul <70071346+c99rahul@users.noreply.github.com> Date: Thu, 13 Feb 2025 19:09:53 +0530 Subject: [PATCH 06/20] Change the borderTopWidth value for hr from integer to a pixel value (#379) * Change the borderTopWidth value for hr from an integer value to a pixel value * Update CHANGELOG.md --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 4 +++- src/styles.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f9690d2..29493f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Include unit in `hr` border-width value ([#379](https://github.com/tailwindlabs/tailwindcss-typography/pull/379) ## [0.5.16] - 2025-01-07 diff --git a/src/styles.js b/src/styles.js index a4d6967..42eb43d 100644 --- a/src/styles.js +++ b/src/styles.js @@ -1470,7 +1470,7 @@ module.exports = { }, hr: { borderColor: 'var(--tw-prose-hr)', - borderTopWidth: 1, + borderTopWidth: '1px', }, blockquote: { fontWeight: '500', From c92dc1c120f71d402a54becd6958af692ff426dd Mon Sep 17 00:00:00 2001 From: kibeom lee <46297213+lkb85@users.noreply.github.com> Date: Fri, 14 Feb 2025 00:21:33 +0900 Subject: [PATCH 07/20] Fix typo in comments (#378) --- scripts/release-notes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/release-notes.js b/scripts/release-notes.js index 23d869b..de54d5d 100644 --- a/scripts/release-notes.js +++ b/scripts/release-notes.js @@ -1,5 +1,5 @@ // Given a version, figure out what the release notes are so that we can use this to pre-fill the -// relase notes on a GitHub release for the current version. +// release notes on a GitHub release for the current version. let path = require('path') let fs = require('fs') From 632970e3ce6fc10d1bfd8fb46cc9083d0d32986d Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 25 Feb 2025 11:57:06 +0100 Subject: [PATCH 08/20] Readme: Remove unused `{theme}` (#385) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index fcb4fb4..ac2ac64 100644 --- a/README.md +++ b/README.md @@ -247,7 +247,7 @@ You can then create your own color theme by adding a new `tailwind.config.js` fi module.exports = { theme: { extend: { - typography: ({ theme }) => ({ + typography: () => ({ pink: { css: { '--tw-prose-body': 'var(--color-pink-800)', From d3c1fbdc604902bc20049ce936d1410adbd6771c Mon Sep 17 00:00:00 2001 From: Craig Morris Date: Sat, 21 Jun 2025 04:15:45 +1000 Subject: [PATCH 09/20] Include v3 installation instructions alongside v4 (#388) * Include link to v3 installation instructions Helpful for us on older projects and installing this plugin. * Add instructions instead of linking * Update * update * Add code fence blocks --------- Co-authored-by: Jordan Pittman --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index ac2ac64..174c09c 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,21 @@ Then add the plugin to your main `style.css` file: + @plugin "@tailwindcss/typography"; ``` +If you are still using **Tailwind CSS v3**, add the plugin to your `tailwind.config.js` file: + +``` +// tailwind.config.js +module.exports = { + theme: { + // ... + }, + plugins: [ + require('@tailwindcss/typography'), + // ... + ], +} +``` + --- ## Basic usage From 25051fbfd7c7058708233b1b4c6280f039e5855d Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 20 Jun 2025 14:16:18 -0400 Subject: [PATCH 10/20] Fix syntax highlighting in readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 174c09c..b2015d6 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ Then add the plugin to your main `style.css` file: If you are still using **Tailwind CSS v3**, add the plugin to your `tailwind.config.js` file: -``` +```js // tailwind.config.js module.exports = { theme: { From b7cdf1e1ec98381e337800bc78863c0bbc72d6a5 Mon Sep 17 00:00:00 2001 From: Will Mruzek Date: Fri, 22 Aug 2025 14:01:08 -0400 Subject: [PATCH 11/20] Clarify 'not-prose' usage when using prefixes (#399) * Update README with 'not-prose' usage clarification * Update README.md --------- Co-authored-by: Jordan Pittman --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index b2015d6..db317dd 100644 --- a/README.md +++ b/README.md @@ -245,6 +245,8 @@ If you have a block of markup embedded in some content that shouldn't inherit th Note that you can't nest new `prose` instances within a `not-prose` block at this time. +Even when using a prefix for your utilities `not-prose` should not have a prefix. + ### Adding custom color themes To customize the color theme beyond simple CSS overrides, you can use the JavaScript based theme API. To do that, use the `@config` directive: From ecb7d5c435fbdf907a1224a453539143c802a75c Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 17 Sep 2025 16:02:42 +0200 Subject: [PATCH 12/20] Remove lodash dependencies (#402) * Remove lodash dependencies Replace lodash.merge, lodash.castarray, and lodash.isplainobject with inline implementations to reduce bundle size and eliminate external dependencies. The merge function maintains full compatibility with lodash behavior, including recursive merging of nested objects within arrays. - Remove lodash.merge, lodash.castarray, lodash.isplainobject from dependencies - Add inline implementations in src/utils.js with identical behavior - Update src/index.js to import utilities from utils module - Maintain backward compatibility and all existing functionality Fixes bundle size concerns raised in community discussions about lodash dependencies. * Add changelog --- CHANGELOG.md | 4 +++ package-lock.json | 39 +++-------------------------- package.json | 3 --- src/index.js | 9 ++----- src/utils.js | 62 +++++++++++++++++++++++++++++++++++++++++++++-- 5 files changed, 69 insertions(+), 48 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 29493f2..bba3064 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Include unit in `hr` border-width value ([#379](https://github.com/tailwindlabs/tailwindcss-typography/pull/379) +### Changed + +- Remove lodash dependencies ([#402](https://github.com/tailwindlabs/tailwindcss-typography/pull/402)) + ## [0.5.16] - 2025-01-07 ### Fixed diff --git a/package-lock.json b/package-lock.json index 001b8a5..7ac3cc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,17 +1,14 @@ { "name": "@tailwindcss/typography", - "version": "0.5.14", + "version": "0.5.16", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@tailwindcss/typography", - "version": "0.5.14", + "version": "0.5.16", "license": "MIT", "dependencies": { - "lodash.castarray": "^4.4.0", - "lodash.isplainobject": "^4.0.6", - "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "devDependencies": { @@ -30,7 +27,7 @@ "tailwindcss": "^3.2.2" }, "peerDependencies": { - "tailwindcss": ">=3.0.0 || insiders" + "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "node_modules/@ampproject/remapping": { @@ -5293,21 +5290,6 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, - "node_modules/lodash.castarray": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", - "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=" - }, - "node_modules/lodash.isplainobject": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", - "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=" - }, - "node_modules/lodash.merge": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", - "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" - }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -11025,21 +11007,6 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, - "lodash.castarray": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", - "integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=" - }, - "lodash.isplainobject": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", - "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=" - }, - "lodash.merge": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", - "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==" - }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", diff --git a/package.json b/package.json index 70ff5f3..ff656ab 100644 --- a/package.json +++ b/package.json @@ -48,9 +48,6 @@ "tailwindcss": "^3.2.2" }, "dependencies": { - "lodash.castarray": "^4.4.0", - "lodash.isplainobject": "^4.0.6", - "lodash.merge": "^4.6.2", "postcss-selector-parser": "6.0.10" }, "jest": { diff --git a/src/index.js b/src/index.js index 04830b9..d231d01 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,6 @@ const plugin = require('tailwindcss/plugin') -const merge = require('lodash.merge') -const castArray = require('lodash.castarray') const styles = require('./styles') -const { commonTrailingPseudos } = require('./utils') +const { commonTrailingPseudos, isObject, isPlainObject, merge, castArray } = require('./utils') const computed = { // Reserved for future "magic properties", for example: @@ -25,10 +23,6 @@ function inWhere(selector, { className, modifier, prefix }) { return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))` } -function isObject(value) { - return typeof value === 'object' && value !== null -} - function configToCss(config = {}, { target, className, modifier, prefix }) { function updateSelector(k, v) { if (target === 'legacy') { @@ -138,3 +132,4 @@ module.exports = plugin.withOptions( } } ) + diff --git a/src/utils.js b/src/utils.js index 5350890..2faa03e 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,9 +1,67 @@ -const isPlainObject = require('lodash.isplainobject') - const parser = require('postcss-selector-parser') const parseSelector = parser() +function isObject(value) { + return typeof value === 'object' && value !== null +} + +function isPlainObject(value) { + if (typeof value !== 'object' || value === null) { + return false + } + + if (Object.prototype.toString.call(value) !== '[object Object]') { + return false + } + + if (Object.getPrototypeOf(value) === null) { + return true + } + + let proto = value + while (Object.getPrototypeOf(proto) !== null) { + proto = Object.getPrototypeOf(proto) + } + + return Object.getPrototypeOf(value) === proto +} + +function merge(target, ...sources) { + if (!sources.length) return target + const source = sources.shift() + + if (isObject(target) && isObject(source)) { + for (const key in source) { + if (Array.isArray(source[key])) { + if (!target[key]) target[key] = [] + source[key].forEach((item, index) => { + if (isPlainObject(item) && isPlainObject(target[key][index])) { + target[key][index] = merge(target[key][index], item) + } else { + target[key][index] = item + } + }) + } else if (isPlainObject(source[key])) { + if (!target[key]) target[key] = {} + merge(target[key], source[key]) + } else { + target[key] = source[key] + } + } + } + + return merge(target, ...sources) +} + +function castArray(value) { + return Array.isArray(value) ? value : [value] +} + module.exports = { + isObject, + isPlainObject, + merge, + castArray, isUsableColor(color, values) { return isPlainObject(values) && color !== 'gray' && values[600] }, From ecb7e87a52d86afbbff64200d40f05fe59433039 Mon Sep 17 00:00:00 2001 From: henry-corpusant Date: Wed, 17 Sep 2025 07:42:01 -0700 Subject: [PATCH 13/20] Add Tailwind v4 custom color theme example to README (#396) * Add Tailwind v4 custom color theme example to README * Small fixes --------- Co-authored-by: Philipp Spiess --- README.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 46 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index db317dd..954948c 100644 --- a/README.md +++ b/README.md @@ -249,15 +249,46 @@ Even when using a prefix for your utilities `not-prose` should not have a prefix ### Adding custom color themes -To customize the color theme beyond simple CSS overrides, you can use the JavaScript based theme API. To do that, use the `@config` directive: +To customize the color theme beyond simple CSS overrides, add a `@utility` directive to your CSS file: -```diff - @import "tailwindcss"; - @plugin "@tailwindcss/typography"; -+ @config "./tailwind.config.js"; +```css +@utility prose-pink { + --tw-prose-body: var(--color-pink-800); + --tw-prose-headings: var(--color-pink-900); + --tw-prose-lead: var(--color-pink-700); + --tw-prose-links: var(--color-pink-900); + --tw-prose-bold: var(--color-pink-900); + --tw-prose-counters: var(--color-pink-600); + --tw-prose-bullets: var(--color-pink-400); + --tw-prose-hr: var(--color-pink-300); + --tw-prose-quotes: var(--color-pink-900); + --tw-prose-quote-borders: var(--color-pink-300); + --tw-prose-captions: var(--color-pink-700); + --tw-prose-code: var(--color-pink-900); + --tw-prose-pre-code: var(--color-pink-100); + --tw-prose-pre-bg: var(--color-pink-900); + --tw-prose-th-borders: var(--color-pink-300); + --tw-prose-td-borders: var(--color-pink-200); + --tw-prose-invert-body: var(--color-pink-200); + --tw-prose-invert-headings: var(--color-white); + --tw-prose-invert-lead: var(--color-pink-300); + --tw-prose-invert-links: var(--color-white); + --tw-prose-invert-bold: var(--color-white); + --tw-prose-invert-counters: var(--color-pink-400); + --tw-prose-invert-bullets: var(--color-pink-600); + --tw-prose-invert-hr: var(--color-pink-700); + --tw-prose-invert-quotes: var(--color-pink-100); + --tw-prose-invert-quote-borders: var(--color-pink-700); + --tw-prose-invert-captions: var(--color-pink-400); + --tw-prose-invert-code: var(--color-white); + --tw-prose-invert-pre-code: var(--color-pink-300); + --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); + --tw-prose-invert-th-borders: var(--color-pink-600); + --tw-prose-invert-td-borders: var(--color-pink-700); +} ``` -You can then create your own color theme by adding a new `tailwind.config.js` file with the `typography` section and providing your colors under the `css` key: +For Tailwind v3, update the `typography` section in the JavaScript config file and provide your colors under the `css` key: ```js {{ filename: 'tailwind.config.js' }} /** @type {import('tailwindcss').Config} */ @@ -338,7 +369,15 @@ Now every instance of `prose` in the default class names will be replaced by you ### Customizing the CSS -If you want to customize the raw CSS generated by this plugin, first follow the steps from [adding custom color themes](#adding-custom-color-themes) to set up a JavaScript based configuration API and then add your overrides under the `typography` key in the `theme` section of your `tailwind.config.js` file: +If you want to customize the raw CSS generated by this plugin, you can use the JavaScript based theme API. To do that, use the `@config` directive: + +```diff + @import "tailwindcss"; + @plugin "@tailwindcss/typography"; ++ @config "./tailwind.config.js"; +``` + +You can then create your own config by adding a new `tailwind.config.js` file with the `typography` section and providing your styles under the `css` key: ```js {{ filename: 'tailwind.config.js' }} /** @type {import('tailwindcss').Config} */ From f822222ae6e289e8cc0b23636891dc3545d5682a Mon Sep 17 00:00:00 2001 From: Joo Chanhwi <56245920+te6-in@users.noreply.github.com> Date: Thu, 18 Sep 2025 19:44:39 +0900 Subject: [PATCH 14/20] Fix `kbd` shadow colors not being calculated on oklch colors (#387) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: correctly apply alpha to kbd shadows when not hex * Use `color-mix(…)` for non hex values * Add changelog --------- Co-authored-by: Philipp Spiess --- CHANGELOG.md | 1 + src/styles.js | 37 ++++++++++++++++++++++--------------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bba3064..42654a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Include unit in `hr` border-width value ([#379](https://github.com/tailwindlabs/tailwindcss-typography/pull/379) +- Ensure `` styles work with Tailwind CSS v4 ([#387](https://github.com/tailwindlabs/tailwindcss-typography/pull/387)) ### Changed diff --git a/src/styles.js b/src/styles.js index 42eb43d..eb2f6bd 100644 --- a/src/styles.js +++ b/src/styles.js @@ -7,13 +7,21 @@ const round = (num) => .replace(/\.0$/, '') const rem = (px) => `${round(px / 16)}rem` const em = (px, base) => `${round(px / base)}em` -const hexToRgb = (hex) => { - hex = hex.replace('#', '') +const opacity = (color, opacity) => { + // In v3, the colors are hex encoded and a previous typography plugin version + // only handled these values. We keep the old behavior for backward + // compatibility with v3 codebases but use color-mix for any other color + // values. + hex = color.replace('#', '') hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex const r = parseInt(hex.substring(0, 2), 16) const g = parseInt(hex.substring(2, 4), 16) const b = parseInt(hex.substring(4, 6), 16) - return `${r} ${g} ${b}` + + if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) { + return `color-mix(in oklab, ${color} ${opacity}, transparent)` + } + return `rgb(${r}, ${g}, ${b} / ${opacity})` } let defaultModifiers = { @@ -1059,7 +1067,7 @@ let defaultModifiers = { '--tw-prose-quote-borders': colors.slate[200], '--tw-prose-captions': colors.slate[500], '--tw-prose-kbd': colors.slate[900], - '--tw-prose-kbd-shadows': hexToRgb(colors.slate[900]), + '--tw-prose-kbd-shadows': opacity(colors.slate[900], '10%'), '--tw-prose-code': colors.slate[900], '--tw-prose-pre-code': colors.slate[200], '--tw-prose-pre-bg': colors.slate[800], @@ -1077,7 +1085,7 @@ let defaultModifiers = { '--tw-prose-invert-quote-borders': colors.slate[700], '--tw-prose-invert-captions': colors.slate[400], '--tw-prose-invert-kbd': colors.white, - '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), + '--tw-prose-invert-kbd-shadows': opacity(colors.white, '10%'), '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.slate[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1100,7 +1108,7 @@ let defaultModifiers = { '--tw-prose-quote-borders': colors.gray[200], '--tw-prose-captions': colors.gray[500], '--tw-prose-kbd': colors.gray[900], - '--tw-prose-kbd-shadows': hexToRgb(colors.gray[900]), + '--tw-prose-kbd-shadows': opacity(colors.gray[900], '10%'), '--tw-prose-code': colors.gray[900], '--tw-prose-pre-code': colors.gray[200], '--tw-prose-pre-bg': colors.gray[800], @@ -1118,7 +1126,7 @@ let defaultModifiers = { '--tw-prose-invert-quote-borders': colors.gray[700], '--tw-prose-invert-captions': colors.gray[400], '--tw-prose-invert-kbd': colors.white, - '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), + '--tw-prose-invert-kbd-shadows': opacity(colors.white, '10%'), '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.gray[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1141,7 +1149,7 @@ let defaultModifiers = { '--tw-prose-quote-borders': colors.zinc[200], '--tw-prose-captions': colors.zinc[500], '--tw-prose-kbd': colors.zinc[900], - '--tw-prose-kbd-shadows': hexToRgb(colors.zinc[900]), + '--tw-prose-kbd-shadows': opacity(colors.zinc[900], '10%'), '--tw-prose-code': colors.zinc[900], '--tw-prose-pre-code': colors.zinc[200], '--tw-prose-pre-bg': colors.zinc[800], @@ -1159,7 +1167,7 @@ let defaultModifiers = { '--tw-prose-invert-quote-borders': colors.zinc[700], '--tw-prose-invert-captions': colors.zinc[400], '--tw-prose-invert-kbd': colors.white, - '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), + '--tw-prose-invert-kbd-shadows': opacity(colors.white, '10%'), '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.zinc[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1182,7 +1190,7 @@ let defaultModifiers = { '--tw-prose-quote-borders': colors.neutral[200], '--tw-prose-captions': colors.neutral[500], '--tw-prose-kbd': colors.neutral[900], - '--tw-prose-kbd-shadows': hexToRgb(colors.neutral[900]), + '--tw-prose-kbd-shadows': opacity(colors.neutral[900], '10%'), '--tw-prose-code': colors.neutral[900], '--tw-prose-pre-code': colors.neutral[200], '--tw-prose-pre-bg': colors.neutral[800], @@ -1200,7 +1208,7 @@ let defaultModifiers = { '--tw-prose-invert-quote-borders': colors.neutral[700], '--tw-prose-invert-captions': colors.neutral[400], '--tw-prose-invert-kbd': colors.white, - '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), + '--tw-prose-invert-kbd-shadows': opacity(colors.white, '10%'), '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.neutral[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1223,7 +1231,7 @@ let defaultModifiers = { '--tw-prose-quote-borders': colors.stone[200], '--tw-prose-captions': colors.stone[500], '--tw-prose-kbd': colors.stone[900], - '--tw-prose-kbd-shadows': hexToRgb(colors.stone[900]), + '--tw-prose-kbd-shadows': opacity(colors.stone[900], '10%'), '--tw-prose-code': colors.stone[900], '--tw-prose-pre-code': colors.stone[200], '--tw-prose-pre-bg': colors.stone[800], @@ -1241,7 +1249,7 @@ let defaultModifiers = { '--tw-prose-invert-quote-borders': colors.stone[700], '--tw-prose-invert-captions': colors.stone[400], '--tw-prose-invert-kbd': colors.white, - '--tw-prose-invert-kbd-shadows': hexToRgb(colors.white), + '--tw-prose-invert-kbd-shadows': opacity(colors.white, '10%'), '--tw-prose-invert-code': colors.white, '--tw-prose-invert-pre-code': colors.stone[300], '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)', @@ -1527,8 +1535,7 @@ module.exports = { fontWeight: '500', fontFamily: 'inherit', color: 'var(--tw-prose-kbd)', - boxShadow: - '0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%)', + boxShadow: '0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows)', }, code: { color: 'var(--tw-prose-code)', From 042a531528cd3ddecafda94fe972394dc8aab6ae Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 18 Sep 2025 14:52:51 +0200 Subject: [PATCH 15/20] Add `prose-picture` modifiers (#367) --- CHANGELOG.md | 4 ++++ README.md | 5 +++-- src/index.js | 2 +- src/index.test.js | 6 ++++++ 4 files changed, 14 insertions(+), 3 deletions(-) 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) diff --git a/README.md b/README.md index 954948c..43163d8 100644 --- a/README.md +++ b/README.md @@ -187,6 +187,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` | @@ -345,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; } ``` diff --git a/src/index.js b/src/index.js index d231d01..937756b 100644 --- a/src/index.js +++ b/src/index.js @@ -96,6 +96,7 @@ module.exports = plugin.withOptions( ['th'], ['td'], ['img'], + ['picture'], ['video'], ['hr'], ['lead', '[class~="lead"]'], @@ -132,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 511afcb0bd9732eb8fcdc703f35ff76e57bfcd7b Mon Sep 17 00:00:00 2001 From: Hampus Wallentin Olsen <55430265+hampusolsen@users.noreply.github.com> Date: Thu, 18 Sep 2025 14:57:08 +0200 Subject: [PATCH 16/20] Add modifiers for description list elements (#357) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hello! 👋🏼 _I tried finding some contribution guidelines but couldn't; Hopefully this is allowed even though it does not address an active issue._ The description list elements introduced in #316 did not include a way to target these using `prose-dl:` so I have taken the liberty of adding them in. --- README.md | 3 +++ src/index.js | 3 +++ src/index.test.js | 13 +++++++++++++ 3 files changed, 19 insertions(+) diff --git a/README.md b/README.md index 43163d8..c4f6e63 100644 --- a/README.md +++ b/README.md @@ -181,6 +181,9 @@ Here's a complete list of available element modifiers: | `prose-ol:{utility}` | `ol` | | `prose-ul:{utility}` | `ul` | | `prose-li:{utility}` | `li` | +| `prose-dl:{utility}` | `dl` | +| `prose-dt:{utility}` | `dt` | +| `prose-dd:{utiddty}` | `dd` | | `prose-table:{utility}` | `table` | | `prose-thead:{utility}` | `thead` | | `prose-tr:{utility}` | `tr` | diff --git a/src/index.js b/src/index.js index 937756b..6838184 100644 --- a/src/index.js +++ b/src/index.js @@ -90,6 +90,9 @@ module.exports = plugin.withOptions( ['ol'], ['ul'], ['li'], + ['dl'], + ['dt'], + ['dd'], ['table'], ['thead'], ['tr'], diff --git a/src/index.test.js b/src/index.test.js index 6713ba5..fad2514 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -701,6 +701,9 @@ test('element variants', async () => { prose-ol:pl-6 prose-ul:pl-8 prose-li:my-4 + prose-dl:pl-6 + prose-dt:pl-8 + prose-dd:my-4 prose-table:my-8 prose-thead:border-red-300 prose-tr:border-red-200 @@ -833,6 +836,16 @@ test('element variants', async () => { margin-top: 1rem; margin-bottom: 1rem; } + .prose-dl\:pl-6 :is(:where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *))) { + padding-left: 1.5rem; + } + .prose-dt\:pl-8 :is(:where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *))) { + padding-left: 2rem; + } + .prose-dd\:my-4 :is(:where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *))) { + margin-top: 1rem; + margin-bottom: 1rem; + } .prose-table\:my-8 :is(:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *))) { margin-top: 2rem; From e0ec248bafa002d589509e29bfd9f054570e6d85 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Fri, 19 Sep 2025 12:33:13 +0200 Subject: [PATCH 17/20] chore(ci): update actions for release insiders --- .github/workflows/release-insiders.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/release-insiders.yml b/.github/workflows/release-insiders.yml index 88eb632..9eb00f0 100644 --- a/.github/workflows/release-insiders.yml +++ b/.github/workflows/release-insiders.yml @@ -17,10 +17,10 @@ jobs: node-version: [22] steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v2 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} registry-url: 'https://registry.npmjs.org' From 7efcb4a499e6ede67088e28393a906d4d089e580 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Fri, 19 Sep 2025 12:42:12 +0200 Subject: [PATCH 18/20] 0.5.17 --- CHANGELOG.md | 10 ++++++++-- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e0c64d..61b168b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,13 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- Nothing yet! + +## [0.5.17] - 2025-09-19 + ### Added +- Add modifiers for description list elements ([#357](https://github.com/tailwindlabs/tailwindcss-typography/pull/357)) - 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) +- Include unit in `hr` border-width value ([#379](https://github.com/tailwindlabs/tailwindcss-typography/pull/379)) - Ensure `` styles work with Tailwind CSS v4 ([#387](https://github.com/tailwindlabs/tailwindcss-typography/pull/387)) ### Changed @@ -226,7 +231,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Everything! -[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.16...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.17...HEAD +[0.5.17]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.16...v0.5.17 [0.5.16]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.15...v0.5.16 [0.5.15]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.14...v0.5.15 [0.5.14]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.13...v0.5.14 diff --git a/package-lock.json b/package-lock.json index 7ac3cc3..3c81ced 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@tailwindcss/typography", - "version": "0.5.16", + "version": "0.5.17", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@tailwindcss/typography", - "version": "0.5.16", + "version": "0.5.17", "license": "MIT", "dependencies": { "postcss-selector-parser": "6.0.10" diff --git a/package.json b/package.json index ff656ab..d3f9b7b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/typography", - "version": "0.5.16", + "version": "0.5.17", "description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.", "main": "src/index.js", "types": "src/index.d.ts", From ed952066e698dbb65a2f082eeb903ccba5a6834a Mon Sep 17 00:00:00 2001 From: Abraham Arango Date: Fri, 19 Sep 2025 11:01:40 -0500 Subject: [PATCH 19/20] Fix variable declaration in opacity function (#403) Fixes bug where `hex` isn't defined due to [these recent changes](https://github.com/tailwindlabs/tailwindcss-typography/commit/f822222ae6e289e8cc0b23636891dc3545d5682a#diff-f3331a84c51a6f085fad8f853ae9dc1eb9188eca02f0ff692310780e4dfc58a0R10-R16) image image --- src/styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles.js b/src/styles.js index eb2f6bd..5371223 100644 --- a/src/styles.js +++ b/src/styles.js @@ -12,7 +12,7 @@ const opacity = (color, opacity) => { // only handled these values. We keep the old behavior for backward // compatibility with v3 codebases but use color-mix for any other color // values. - hex = color.replace('#', '') + let hex = color.replace('#', '') hex = hex.length === 3 ? hex.replace(/./g, '$&$&') : hex const r = parseInt(hex.substring(0, 2), 16) const g = parseInt(hex.substring(2, 4), 16) From b316f958af5bc12a981526c3091d8319626e274e Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 19 Sep 2025 12:04:12 -0400 Subject: [PATCH 20/20] 0.5.18 --- CHANGELOG.md | 9 ++++++++- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 61b168b..4ca94e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Nothing yet! +## [0.5.18] - 2025-09-19 + +### Fixed + +- Fixed undefined variable error ([#403](https://github.com/tailwindlabs/tailwindcss-typography/pull/403)) + ## [0.5.17] - 2025-09-19 ### Added @@ -231,7 +237,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Everything! -[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.17...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.18...HEAD +[0.5.18]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.17...v0.5.18 [0.5.17]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.16...v0.5.17 [0.5.16]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.15...v0.5.16 [0.5.15]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.14...v0.5.15 diff --git a/package-lock.json b/package-lock.json index 3c81ced..878aaee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@tailwindcss/typography", - "version": "0.5.17", + "version": "0.5.18", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@tailwindcss/typography", - "version": "0.5.17", + "version": "0.5.18", "license": "MIT", "dependencies": { "postcss-selector-parser": "6.0.10" diff --git a/package.json b/package.json index d3f9b7b..b23eaa0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/typography", - "version": "0.5.17", + "version": "0.5.18", "description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.", "main": "src/index.js", "types": "src/index.d.ts",