Ben Borgers / Posts /

How to customize Tailwind Typography plugin

April 9, 2021 by @benborgers

You can customize the styles applied by the @tailwindcss/typography plugin in your tailwind.config.js file:

// tailwind.config.js

module.exports = {
    theme: {
        extend: {
            typography: theme => ({
                DEFAULT: {
                    css: {
                        color: theme('colors.blue.500'),
                        textDecoration: 'none'
                    }
                }
            }
        }
    },
    plugins: [
        require('@tailwindcss/typography')
    ]
}

The theme helper function lets you access values from your Tailwind config. I find it helpful to reference the default Tailwind config when using this helper.

It's also helpful to reference the default Tailwind typography config to figure out what you want to override.

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!

Loading...