Tailwind - Set Typography Plugin Defaults

tailwind-typography-set-defaults.js

// Note: This uses custom colors so it will scream at you if you use as-is
extend: {
    typography: (theme) => ({
        DEFAULT: {
            css: {
                color: theme('colors.gray.800'),
                a: {
                    color: theme('colors.peach.900'),
                    '&:hover': {
                        color: theme('colors.peach.700'),
                    },
                },
                h1: {
                    color: theme('colors.sunset.700'),
                    fontFamily: `${theme('fontFamily.serif')}`,
                },
                h2: {
                    color: theme('colors.peach.900'),
                    fontFamily: `${theme('fontFamily.serif')}`,
                    marginTop: '1rem',
                },
                h3: {
                    color: theme('colors.brand.800'),
                    fontFamily: `${theme('fontFamily.serif')}`,
                },
                h4: {
                    color: theme('colors.brand.800'),
                },
                ul: {
                    '&>li:before': {
                        // Color for bullets
                        backgroundColor: theme('colors.peach.500'),
                    },
                },
            },
        },
    }),
}