Quick Tip: How To Use Blue Links in Tailwind Typography (Prose)

The Tailwind Typography plugin (that adds the .prose class) comes with a very opinionated link style. If you want the more classic one, it's easy to fix in the config. You can also go bold and use any other color of course. I'm going with Indigo for a sweet blue link.

theme: {
    extend: {
        fontFamily: {
            sans: ['Inter var', ...defaultTheme.fontFamily.sans],
        },
        typography: (theme) => ({
            DEFAULT: {
                css: {
                    a: {
                        color: theme('colors.indigo.600'),
                        textDecoration: 'none',
                        '&:hover': {
                            color: theme('colors.indigo.500'),
                        },
                    },
                },
            },
        }),
    },
},

And that's it!

Blog

Quick Tip: How To Use Blue Links in Tailwind Typography (Prose)

CodeWithCaen

Join Our Newsletter. No Spam, Only the good stuff.

Related