Skip to content

How To Use Blue Links in Tailwind Typography (Prose)

Posted by author

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.

Filepath: tailwind.config.js
1theme: {
2 extend: {
3 fontFamily: {
4 sans: ['Inter var', ...defaultTheme.fontFamily.sans],
5 },
6 typography: (theme) => ({
7 DEFAULT: {
8 css: {
9 a: {
10 color: theme('colors.indigo.600'),
11 textDecoration: 'none',
12 '&:hover': {
13 color: theme('colors.indigo.500'),
14 },
15 },
16 },
17 },
18 }),
19 },
20},

And that's it!


Syntax highlighting by Torchlight.dev

End of article