How to add custom CSS rules in Tailwind CSS Typography plugin

Sometimes, it is necessary to add some styling to your Tailwindcss .prose class.

You can do that in two ways. The first one is obvious: you add some additional CSS classes. Imagine you need to change your headings and paragraphs text to black color.

<div class="prose prose-headings:text-black prose-p:text-black">
    ...
</div>

Then, you suddenly realize that also you have to change your strong text color, so you add one more class.

<div class="prose prose-headings:text-black prose-p:text-black prose-strong:text-black">
    ...
</div>

Then you discover that there are more HTML tags to alter, but Tailwind typography plugin doesn’t support that (for example, you can’t style <mark> tag with prose CSS classes).

That’s why I recommend you make the necessary changes in tailwind.config.js file. It should be like this:

module.exports = {
    content: [
        './*/*.php',
        './**/*.php',
        './resources/css/*.css',
        './resources/js/*.js',
        './safelist.txt'
    ],
    theme: {
        extend: {
            typography: {
              DEFAULT: { // this is for prose class
                css: {
                color: '#000', // change global color scheme
                p: {
                   //fontSize: '14px', // key can be in camelCase...
                   'color': '#000', // 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: {
                 ....
              },
            },
           },              
        },
    },
    plugins: [
        require('@tailwindcss/typography'),
      ],    
};

You can also read an official documentation on typography plugin customization.