A Test with Tailwind Prose Classes

With the new @tailwindcss/typography module I can add prose modifiers that will render to the output HTML. This allows you to style HTML tags individually with i.e. prose-h*:text-color-*00

this is a H1 header

this is a H2 header

this is a H3 header

this is a H4 header

You can change link colors too and define hover with prose prose-a:text-pink-700 hover:prose-a:text-cyan-700 - example: gohugo.io

Note that in standard prose code snippets show the ` for some reason. So in standard prose you get:

`<code>Something</code>`

But I want want:

<code>Something</code>

So I modified the tailwind.config.js to:

module.exports = {
content: ['./layouts/**/*.html'],
theme: {
    extend: {
        typography: {
            DEFAULT: {
                css: {
                    "code::before": {content: ''},
                    "code::after": {content: ''}
                }
            }
        }
    }
},
plugins: [
    require('@tailwindcss/typography'),
],
}

Remove those extra lines you want the `ticks`. Tailwind uses them on their website.

Click for more about: @tailwindcss/typography

~~ The End ~~