Tailwind css Dark Prose classes
2021-01-01
Code Snippet
Tailwind Config for dark mode
javascript
module.exports = { purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"], darkMode: false, // or 'media' or 'class' 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: {}, }, plugins: [require("@tailwindcss/typography")], };
Back to blog