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")],
};

Blog

Tailwind 2.0 Dark Mode and Typography

Nikita Makhov

Join Our Newsletter. No Spam, Only the good stuff.

Related