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
defaultkey toDEFAULTintypographysection - dont't forget to move all your settings to
extendsection of yourtailwind.config.js - don't forget to add
variantfor officialtailwind-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")],
};
Top comments (0)