Plugins

Adding plugin

install plugins

    npm install -D @tailwindcss/typography

tailwind.config.js

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography')
  ]
}

Using typography plugin

definition

    // normal mode
    <article class="prose">
        // ...
    </article>

    // dark mode
    <article class="prose dark:prose-invert">
        // ...
    </article>

    // customize plugin
    <article class="prose
                    prose-h1:underline prose-h1:underline-offset-8
                    prose-h2:first-letter:text-cyan-600
                    prose-headings:text-cyan-900
                    prose-lead:text-cyan-600
                    prose-p:first-line:italic
                    prose-blockquote:text-cyan-600 prose-blockquote:border-cyan-600 
                    prose-blockquote:mx-6 prose-figure:mx-6
                    prose-figcaption:text-center
                    prose-img:rounded-lg prose-img:drop-shadow-lg
                    prose-li:marker:text-cyan-600">
        // ...
    </article>

Building custom tailwind plugins

plugins/counters.js

const plugin = require('tailwindcss/plugin')
const counters = plugin(function ({ addBase, addComponents, theme }) { 
// The addBase() function adds base styles.
    addBase({
        'h1': {
            counterReset: 'level-1'
        }, 
        'h2': {
            counterReset: 'level-2'
        },
        'h3': {
            counterReset: 'level-3'
        },
        'h2::before, h3::before, h4::before': {
            color: theme('colors.slate.600')
        },
        'h2::before': {
            counterIncrement: 'level-1',
            content: 'counter(level-1) ". "'
        },
        'h3::before': {
            counterIncrement: 'level-2',
            content: 'counter(level-1) "." counter(level-2) " "'
        },
        'h4::before': {
            counterIncrement: 'level-3',
            content: 'counter(level-1) "." counter(level-2) "." counter(level-3) " "'
        }
    }),
// The addComponents() function adds static component styles.
// The matchComponents() function adds dynamic component styles.
// The addUtilities() function adds static utility styles.
    addUtilities({
        '.collection': {
            counterReset: 'collection'
        },
        '.item::before': {
            counterIncrement: 'collection',
            content: 'counters(collection,".") " "'
        }
    })
// The matchUtilities() function adds dynamic utility styles.
// The addVariant() function adds custom variants.
// The theme() function provides access to values in the user’s theme configuration.
// The config() function provides access to values in the user’s Tailwind configuration.
// The corePlugins() function checks if a core plugin is enabled.
// The e() function manually escapes strings meant to be used in class names.
})

module.exports = counters

add the plugin into tailwind.config.js

module.exports = {
    // ...
    plugins: [
        require('./plugins/counters')
    ]
}