DEV Community

CodeWithCaen
CodeWithCaen

Posted on • Originally published at tips.desilva.se

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'),
                        },
                    },
                },
            },
        }),
    },
},
Enter fullscreen mode Exit fullscreen mode

And that's it!

Top comments (0)