TailwindCSS V2开始就增加了色彩模式的切换功能，启用该功能需要在tailwind.config.js中配置

module.exports = {
  darkMode: "media", // or "class"
  // ...more config
}

开启dark模式后，可以通过css类中添加dark:前缀参数来指定深色模式下的样式。

Typography插件用于TailwindCSS针对文本样式，启用方式是在文本容器中添加prose类来启用，如果开启深色模式则再添加上dark:prose-dark类。

tailwind.config.js文件

module.exports = {
  theme: {
    extend: {
      typography(theme) {
        return {
          dark: {
            css: {
              color: theme("colors.gray.300"),
              '[class~="lead"]': { color: theme("colors.gray.400") },
              a: { color: theme("colors.gray.100") },
              strong: { color: theme("colors.gray.100") },
              "ul > li::before": { backgroundColor: theme("colors.gray.700") },
              hr: { borderColor: theme("colors.gray.800") },
              blockquote: {
                color: theme("colors.gray.100"),
                borderLeftColor: theme("colors.gray.800"),
              },
              h1: { color: theme("colors.gray.100") },
              h2: { color: theme("colors.gray.100") },
              h3: { color: theme("colors.gray.100") },
              h4: { color: theme("colors.gray.100") },
              code: { color: theme("colors.gray.100") },
              "a code": { color: theme("colors.gray.100") },
              pre: {
                color: theme("colors.gray.200"),
                backgroundColor: theme("colors.gray.800"),
              },
              thead: {
                color: theme("colors.gray.100"),
                borderBottomColor: theme("colors.gray.700"),
              },
              "tbody tr": { borderBottomColor: theme("colors.gray.800") },
            },
          },
        };
      },
    },
  },

  variants: {
    extend: { typography: ["dark"] }
  },

  plugins: [require("@tailwindcss/typography")],

  darkMode: "media",
};