JSFiddle - React, Tailwind, and code Playground

HTML

<div class='parent'>
    <div class='child padding-parent-ignore'></div>
</div>
<br class='clear'><br class='clear'>
<div class='parent'>
    <div class='child'></div>
</div>

CSS

.parent{padding:10px 20px 30px 40px;background-color:red;float:left;}
.child{background-color:green;width:100px;height:100px;}
.clear{clear:both;}

JavaScript

$('.padding-parent-ignore').each(function(){
    var $this = $(this),
        $parent = $this.parent(),
        ml = parseInt($parent.css('paddingLeft'), 10),
        mr = parseInt($parent.css('paddingRight'), 10),
        mt = parseInt($parent.css('paddingTop'), 10),
        mb = parseInt($parent.css('paddingBottom'), 10);
    $this.css({
        marginLeft: '-=' + ml + 'px',
        marginRight: '-=' + mr + 'px',
        marginTop: '-=' + mt + 'px',
        marginBottom: '-=' + mb + 'px'
    });
});