Tailwind 2.0 Dark Mode and Typography

Two days ago new version of Tailwind 2.0 was released with native 'Dark Mode' support. Before 2.0 I used tailwindcss-dark-mode plugin to achieve dark mode support in my home page. And when I tried to upgrade to the latest version, everything broke, especially for @tailwindcss/typography. Why?

First thing that I did - I followed official upgrade guide. The key moments are:

• don't forget to change default key to DEFAULT in typography section
• dont't forget to move all your settings to extend section of your tailwind.config.js
• don't forget to add variant for official tailwind-typography. This was the reason I've created this issue

To be clear, this is my config BEFORE Tailwind 2.0:

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ["./_site/**/*.html"],
  },
  theme: {
    extend: {
      screens: {
        dark: { raw: "(prefers-color-scheme: dark)" },
      },
      colors: {
        dark: "#24283b",
      },
    },
    typography: (theme) => ({
      default: {
        css: {
          color: theme("colors.gray.900"),
          a: {
            color: theme("colors.blue.700"),
            "&:hover": {
              color: theme("colors.blue.700"),
              textDecoration: "none",
            },
          },
        },
      },

      dark: {
        css: {
          color: "#7982a9",
          a: {
            color: "#9ECE6A",
            "&:hover": {
              color: "#9ECE6A",
            },
          },
        },
      },
    }),
  },
  plugins: [
    require("tailwindcss-dark-mode"),
    require("@tailwindcss/typography"),
  ],
};

And this is the Tailwind 2.0 config with full native dark mode support:

// tailwind.config.js
module.exports = {
  darkMode: "media", // you can use 'class' here or turn it off with 'false'
  purge: {
    mode: "all",
    content: ["./_site/**/*.html"],
  },
  theme: {
    extend: {
      colors: {
        dark: "#24283b",
      },

      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme("colors.gray.900"),
            a: {
              color: theme("colors.blue.700"),
              "&:hover": {
                color: theme("colors.blue.700"),
                textDecoration: "none",
              },
            },
          },
        },

        dark: {
          css: {
            color: "#7982a9",
            a: {
              color: "#9ECE6A",
              "&:hover": {
                color: "#9ECE6A",
              },
            },
          },
        },
      }),
    },
  },
  variants: {
    typography: ["dark"],
  },
  plugins: [require("@tailwindcss/typography")],
};