How to override a plugin's styling?

[ryanvelbon]

I want to override Tailwind CSS Typography's styling of all <code> elements (except code blocks - i.e., those which are nested in <pre>).

I've added this to my stylesheet which works fine except that some utility classes (e.g. font-medium text-red-500) are then overridden by the plugin.

.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
   content: "";
}

.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
   content: "";
}

:not(pre) > code {
   @apply bg-gray-300 font-medium text-red-500 px-2 py-0.5;
}

Here's my tailwind.config.js file

export default {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.vue',
        './content/**/*.md',
    ],

    theme: {
        extend: {
            typography: {
                
            },
        },
    },

    plugins: [
        require('@tailwindcss/typography'),
    ],
};

So is there a way to apply this styling after the plugin is imported?

[wongjn]

You could move your custom CSS into Tailwind configuration or increase the specificity of the selector and then moving it inside @layer utilities.

---

As an aside, Adam Wathan, creator of Tailwind advocates avoiding @apply:
https://twitter.com/adamwathan/status/1226511611592085504
https://twitter.com/adamwathan/status/1559250403547652097

[ryanvelbon]

Moving the custom CSS to Tailwind config did the trick. Thanks for going the extra mile and providing the full solution!

I tried the @layer utilities way too prior to posting this, didn't seem to make a difference.

re: avoiding @apply. I'm 4 years late seeing this tweet! Got about 50 projects to refactor now lol

Thank you

[wongjn]

Regarding moving into @layer not working, you would also need to increase the specificity of the selector as I said originally.