How do I modify the default styling of the Typography prose class in TailwindCSS?

Question

I have a TailwindCSS 2.0 project and I've installed all the plugins, including the Typography plugin. When I create a div class="prose", I can put any headings, paragraphs, lists, etc into it and it gets styled by the Typography plugin.

In my project, I want all the within the prose class to be a certain blue, by default. And I also want the links to be a certain link colour that I've defined in my config. These are just a couple of modifications that I want to make so that the default prose class styles everything with my styles. How do I go about that and what is the best practice for it?

Answer 1

Typography plugin can be extended

tailwind.config.js

module.exports = {
  theme: {
    typography: {
      DEFAULT: { // this is for prose class
        css: {
          color: theme('colors.yourSpecificColor'), // change global color scheme
          p: {
            fontSize: '14px', // key can be in camelCase...
            'text-align': 'center', // or as it is in css (but in quotes).
          },
          a: {
            // change anchor color and on hover
            color: '#03989E',
              '&:hover': { // could be any. It's like extending css selector
                color: '#F7941E',
              },
          },
          ul: {
            '> li': {
               '&::before': { // more complex example - add before to an li element.
                  content: '',
                  ....,
               },
             },
          },
        },
      },
      sm: { // and this is for prose-sm. 
        css: {
           ....
        },
      },
    },
  },
}

It's also worth mentioning that if you change something in "other" breakpoints than just prose, for example, 'prose-sm', 'prose-md', etc., changes do not inherit, so if you change the color to blue in prose, it will not change in prose-sm.

Customization can be found here

P.S. In example bellow I could messed up with amount of curly brackets, sorry, to hard to track :)