Tailwind 2.0 Dark Mode and Typography
Tags: tailwindcss, darkmode, typography
Published: 2020-11-19 21:48:03

---
title: Tailwind 2.0 Dark Mode and Typography
published: true
description: 
tags: tailwind, darkmode, typography
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/26cqhcd3ts4yrzvqtmt5.png
---

Two days ago new version of Tailwind 2.0 was released with native 'Dark Mode' support. Before 2.0 I used [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) plugin to achieve dark mode support in my [home page](https://defite.ru). 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](https://tailwindcss.com/docs/upgrading-to-v2). 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](https://github.com/tailwindlabs/tailwindcss-typography/issues/94)

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

```javascript
// 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:

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