TailWTF

tailwind.config.js

const defaults = require('./scripts/tailwind.defaults');

module.exports = defaults({
    theme: {},
})

tailwind.defaults.js

const plugin = require('tailwindcss/plugin')
const merge = require('deepmerge')

const plugins = [
    // Vue
    plugin(({ addUtilities }) => {
        addUtilities({
            '[v-cloak]': {
                'display': 'none !important',
            },
        })
    }),

    // IE
    plugin(({ addUtilities }) => {
        addUtilities({
            '@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)': {
                '.sticky': {
                    position: 'fixed',
                },
                '.flex-1': {
                    '-ms-flex-preferred-size': 'auto !important',
                },
            },
        })
    }),

    // Typography
    require('@tailwindcss/typography'),

    // Print Utilities
    plugin(({ addUtilities }) => {
        addUtilities({
            '@media only screen': {
                '.print\\:only': { display: 'none' },
                '.screen\\:hidden': { display: 'none' },
            },
            '@media print': {
                '.screen\\:only': { display: 'none' },
                '.print\\:hidden': { display: 'none' },
            },
        })
    }),

    // Advance Positioning
    plugin(({ addUtilities }) => {
        addUtilities({
            '.top-50p': {
                top: '50%',
                transform: 'translateY(-50%)',
            },
            '.left-50p': {
                left: '50%',
                transform: 'translateX(-50%)',
            },
            '.top-left-50p': {
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
            },
        }, {
            variants: ['responsive'],
        })
    }),
]

const defaults = {
    target: 'ie11',
    theme: {
        container: {
            center: true,
            padding: {
                default: '2rem',
                md: '3rem',
            },
        },
    },
    variants: {},
    plugins,
    purge: [
        './templates/**/*.{vue,js,php,html,twig}',
        './js/**/*.{vue,js,php,html}',
    ],
}

module.exports = config => merge(defaults, config)

I'd also add a reset for disabled buttons

plugin(({addBase}) => {
  addBase({
    'button:disabled': {
      cursor: 'default',
    },
  })
}),