JSFiddle - React, Tailwind, and code Playground

HTML

<div id='head1'>This is a line of text</div>
<div id='head2'>This is a line of text</div>
<p>Note the rending of the first line - clear type is disabled. The second line is much better<p>

CSS

body { background: black; color: white; font-size: 1em }

JavaScript

function doCSSFix() {
    // override the css opacity hook
    if (jQuery.cssHooks.opacity.set) {
        // save the default set() function so we can call it later
        jQuery.cssHooks.opacity.defaultSet = jQuery.cssHooks.opacity.set;

        // make a new set function
        jQuery.cssHooks.opacity.set = function(elem, value) {

            // call our default function
            jQuery.cssHooks.opacity.defaultSet(elem, value);

            // if filter property is just spaces
            // or an opacity filter, then remove the filter style
            if (!elem.style.filter.replace(/\ *(alpha\(opacity=100\))?/, '')) {
                elem.style.removeAttribute('filter');
            }
        }
    }
}

$('#head1').fadeOut().fadeIn(doCSSFix);
$('#head2').fadeOut().fadeIn()