DEV Community

Cover image for Tailwind 2.0 Dark Mode and Typography
Nikita Makhov
Nikita Makhov

Posted on

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"),
  ],
};
Enter fullscreen mode Exit fullscreen mode

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")],
};
Enter fullscreen mode Exit fullscreen mode

Discussion (0)