Tailwindcss Typography Versions Save

Fixed

• Ensure nested selectors using &:hover work (#246)

Removed

• Remove dist folder and related dependencies (#226)

Fixed

• Don't generate invalid CSS when given an array of property values (#224)

This release of @tailwindcss/typography is an exciting one, and finally includes easy support for dark mode, the ability to escape prose styles, and a brand new HTML-based customization API that is a lot more fun to work with than the configuration based API we've offered in the past.

To upgrade, make sure you are on the latest version of Tailwind CSS, then install @tailwindcss/typography@latest:

npm install -D @tailwindcss/typography@latest

This version is designed for Tailwind CSS v3.0+, and is not compatible with earlier versions.

---

Added

• Added prose-invert for easy dark mode support (#216)
• Added gray scale modifiers like prose-slate and prose-stone to make it easy to match your typography to your site's gray scale (#216)
• Added new element modifiers API like prose-a:text-blue-500 for easily customizing individual elements directly in your HTML (#216)
• Added not-prose class for preventing prose styles from affecting a section of HTML (#205)
• Updated selectors to use :where to reduce specificity, making it possible to override prose children with utilities (#203)

Changes

• Switch from ::before pseudo-elements to using the native ::marker pseudo-element for styling list bullets and counters (#216)

v0.5.0 will drop support for Tailwind CSS v2.0 and is intended for use with Tailwind CSS v3.0+.

To upgrade, install @tailwindcss/typography@next:

npm install -D @tailwindcss/typography@next

This is an alpha release, so some things might be broken. I don't know about them otherwise I would have fixed them, but you are gonna find them! So try it, break it, and tell me about it when you do so we can get this thing really battle-tested for a proper v3.0 release in a few weeks.

---

Changes

• Use :where to reduce specificity, making it possible to override prose children with utilities (#203)
• Support "undoing" prose styles using the not-prose class on a group of child elements (#205)
• Update color palette for v3 (#206)
• Improve customization API, add alternate grays, add dark mode support, use ::marker instead of pseudo-elements, and add child element variants (eg. prose-h1:underline)(#216)

Fixed

• Fix list-style modifier selectors (#137)

Fixed

• Colors without 600 variant, breaks everything (#107)
• Fix empty line in firefox for pre code tags (#125)

Added

• Add support for the start and reversed attribute on ol elements (#110)
• Add support for the type on ul and ol elements (#126)

Changed (internal)

• Bumped dependencies (#103, #115)
• Cleanup/improve readme (#95)
• Reduce package size (#112)

This release drops support for Tailwind CSS v1.0.

Some of the changes needed to support Tailwind CSS v2.0 necessitate dropping support for v1.0. You should stay on v0.2.0 until you can upgrade your projects to Tailwind CSS v2.0.

Read the Tailwind CSS v2.0 upgrade guide for information on upgrading your projects.

Changed

• Add support for Tailwind CSS v2.0 and drops support for v1.0 (#79, #82, #87)
• Use extend for any overrides, assigning directly to theme.typography now completely overrides default configuration
• Consistently use ::before instead of :before (ba33d77)
• Read color values from the user's theme instead of only the default theme

Added

• Add new className option for overriding prose class (#28)
• Add color modifiers by default like prose-blue for setting link styles (#92)

---

Upgrading from v0.2.0 to v0.3.0

This version of the plugin is designed for Tailwind CSS v2.0. Make sure you upgrade Tailwind before upgrading this plugin.

Customizations should be moved under extend, default should become DEFAULT

The biggest difference is that any customizations you had under theme.typography should be moved to theme.extend.typography, and the default key should be uppercased to DEFAULT:

  module.exports = {
    theme: {
-     typography: {
-       default: {
-         css: {
-           color: theme("colors.gray.700"),
-           '[class~="lead"]': {
-             color: theme("colors.gray.600"),
-           },
-           a: {
-             color: theme("colors.indigo.600"),
-             fontWeight: 600,
-             textDecoration: "none",
-           },
-         },
-       },
-     },
+     extend: {
+       typography: {
+         DEFAULT: {
+           css: {
+             color: theme("colors.gray.700"),
+             '[class~="lead"]': {
+               color: theme("colors.gray.600"),
+             },
+             a: {
+               color: theme("colors.indigo.600"),
+               fontWeight: 600,
+               textDecoration: "none",
+             },
+           },
+         },
+       },
+     },
    },
  };

Any customizations directly under theme.typography will now completely replace the defaults, which is consistent with how theme modification generally works in Tailwind.

Colors are read from theme by default

In previous versions, all of the colors used by this plugin were read from Tailwind's default theme rather than from your theme. The plugin now looks for colors in your theme first, falling back to the defaults if they don't exist. So if the plugin is looking for gray.700 for the main body color, it will use your defined gray.700 if present, or fall back to the default one.

If your colors are totally custom and the numbers don't line up with Tailwind's defaults from a contrast perspective, you probably won't get good results out of the box. In this case you should manually override the colors like you were likely already doing using the existing customization API.

• Switches how variants are generated to use the new component variants API in Tailwind 1.5, dropping support for Tailwind < 1.5

• Fixes an issue where the lead class was not being applied correctly when used in conjunction with responsive variants