Name: Quick Tip: How To Use Blue Links in Tailwind Typography (Prose)
Rating: 3.4 (9141 reviews)
Author: codewithcaen

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

CodeWithCaen - Sep 27 -

- Dev Community

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!