Overwrite tailwind's underline class

[ahoiroman]

Hello everybody,

is it possible to overwrite tailwind's .underline class and change the thickness of the line?

Thank you all for your feedback :-)

[cytRasch]

There two IMHO possible ways to do this.

First:

As mentioned here. You can add something like this under the tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

.underline {
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

Second:

You can achieve this by adding new utilities to your tailwind.config.js:

module.exports = {
    theme: {
        extend: {}
    },
    variants: {},
    plugins: [
        require('@tailwindcss/custom-forms'),
        function ({addUtilities}) {

            const extendUnderline = {

                '.underline': {
                    textDecoration: 'underline',
                    textDecorationThickness: '3px'
                },
            }

            addUtilities(extendUnderline)
        }
    ]
}

The text-decoration-thickness CSS property is not compatible to all browsers, so maybe you have to do a little hack with something like border-bottom.

Hope that helps.