Tailwind CSS convert more of these inline styles to utility classes

Question

I am using Tailwind CSS 1.6.x and am trying to convert the following CSS to use Tailwind styling.

.my-image-container {
    background: -webkit-linear-gradient(top, rgba(0,128,0,0.5) 0%,rgba(0,128,0,1.0) 100%),url("../img/my-image.png");
    background: -ms-linear-gradient(top, rgba(0,128,0,0.5) 0%,rgba(0,128,0,1.0) 100%),url("../img/my-image.png");
    position:absolute;
    left:0px;
    top:-15px;
    background-position: 0px 0px;
    background-size: cover;
    background-size: contain;
    width: 100%;
    height: 51px;
    overflow: auto;
}

My attempt at this is:

<div 
   class="absolute left-0 w-full h-12 overflow-auto"
   style="top: -15px; background-position: 0px 0px; background: linear-gradient( rgba(0,128,0,0.5) 0%,rgba(0,128,0,1.0) 100%), url('/img/my-image.png'); background-size:contain;"
 >
</div>

This works, but it's not where I want it to be. If I moved bg-contain to the class, it won't work. So I have to add it at the end of the inline style.

What's the best way to translate more of the inline style to Tailwind CSS utility classes? In an ideal world, I want as much of the inline styling to be moved to Tailwind utility classes.

Answer 1

For me, the best way to convert CSS rules to Tailwind classes has been to continuously refer the docs and tackle the rules line by line. I rarely do this though. I just recreate the design with the Tailwind classes doing my best to match the end result.

In your case, there are two backgound-size rules defined. Depending on which one you want use the bg-cover or bg-contain Tailwind classes.

<div 
    class="absolute left-0 mt-4 w-full h-12 bg-left-top bg-contain overflow-auto"
    style='background-image: linear-gradient(top, rgba(0,128,0,0.5) 0%,rgba(0,128,0,1.0) 100%),url("../img/my-image.png")'>
</div>