JSFiddle - React, Tailwind, and code Playground
JavaScript
// pugin wrapper
(function($) {
var _css = $.fn.css;
$.fn.css = function(opts) {
// loop through css color properties
$.each(['background', 'backgroundColor', 'background-color', 'color', 'borderColor', 'border-color'], function(i, v) {
// if set as number (will be integer - not hex at this point)
// convert the value to `#ffccaa` format (adds padding if needed)
if (typeof opts[v] === 'number') opts[v] = ('00000' + opts[v].toString(16)).replace(/.*([a-f\d]{6})$/, '#$1')
})
return _css.apply(this, [opts]);
}
})(jQuery)
// test the plugin
$('body').css({
'background-color': 0xffccFF,
color: 0xccffcc,
border: '3px solid red',
borderColor: 0x0ccaa,
padding: 50
}).html('<h1>This should be a funny color</h1>')