JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<p>This is some <span>highlighted</span> text</p>
<p>Want some <span>more</span>!</p>
</div>
<div class="text">
<p>This is some <span>highlighted</span> text</p>
<p>Want some <span>more</span>!</p>
</div>
JavaScript
(function($) {
$.fn.highlight = function( custom ) {
// Default settings
var settings = $.extend({
color : "", // Default to current text color
background : "yellow" // Default to yellow background
}, custom);
return this.css({
color : settings.color,
backgroundColor : settings.background
});
};
}( jQuery ));
// Use Default settings
$("span").highlight(); // Now you can chain other methods here
// Use custom settings
$(".text span").highlight({
background: "#f00",
color: "white"
});