JSFiddle - React, Tailwind, and code Playground
CSS
.bgImageUrlGradient(@startColor, @endColor, @url) {
background: @startColor;
background-image: url(@url);
background-image: url(@url), -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Saf4+, Chrome */
background-image: url(@url), -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
background-image: url(@url), -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
background-image: url(@url), -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
background-image: url(@url), -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
background-image: url(@url), linear-gradient(top, @startColor, @endColor);
}
JavaScript
// allows you to combine CSS3 gradients and background images in LESS