JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/smoothness/jquery-ui.css">
<div class="buttonContainer">
<button id="testButton">Should be green on hover</button>
</div>
<div id="msg">-</div>

CSS

.greenButton {
    background: #006600 none !important;
    color:white;
}
.greenButtonHover {
    background: #009900 none ! important;
}

JavaScript

//initialize the jQuery button with the correct styles
$('#msg').html($("button").length);
$("button").button();

//add a class that we can apply our styles to (jQuery likes to override styles applied to .ui-button)
$("button").addClass("greenButton");

//override button styles (doesn't work when done through stylesheet)
//$(".greenButton").css("background", "none !important");
//$(".greenButton").css("background-color", "#006600 !important");
//$(".greenButton").css("border", "1px solid darkGray !important");

//mouseover handler to change the background color (same reason as above)
$(".greenButton").hover(function() {
    //mouse-over handler
    $(this).addClass('greenButtonHover');
}, function() {
    //mouse-out handler
    $(this).removeClass('greenButtonHover');
});