Skip to content

v0.3.0

Compare
Choose a tag to compare
@adamwathan adamwathan released this 20 Nov 17:46
· 153 commits to master since this release

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.