JSFiddle - React, Tailwind, and code Playground

by Valentin Radulescu

HTML

<div class="block bl1"></div>
<div class="block bl2"></div>
<div class="block bl3"></div>

CSS

.block {
    width: 50px;
    height: 50px;
    background-color:green;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    display: inline-block;
}

JavaScript

(function ($) {
    $.fn.border = function () {
        //if string ha been passed in
        if (typeof arguments[0] === 'string') {
            this.css('border', arguments[0]);
        
        } else {
            //this works fine
            //return this[0].style.border;
            
            //this doesn't work
            return this.css('border');
        }
        //return object for chaining
        return this;
    };
})(jQuery);

$('.bl1').border('1px solid blue'); //set border for block 1
console.log($('.bl1').border()); //show border value

//this works fine
console.log($('.bl1').css('border'));
console.log(jQuery('.bl1').css('border'));