Tailwind CSS 将更多内联样式转换为实用工具类

Question

我正在使用 Tailwind CSS 1.6.x 并尝试将以下 CSS 转换为使用 Tailwind 样式。

.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;
}

我的尝试是：

<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>

这行得通，但不是我想要的位置。如果我将 bg-contain 移动到 class，它将不起作用。所以我必须在内联样式的末尾添加它。

将更多内联样式转换为 Tailwind CSS 实用程序 classes 的最佳方式是什么？在理想情况下，我希望将尽可能多的内联样式移动到 Tailwind 实用程序 classes.

Answer 1

对我来说，将 CSS 规则转换为 Tailwind 类的最佳方法是不断参考文档并逐行处理规则。不过我很少这样做。我只是用 Tailwind 类重新设计，尽我最大的努力来匹配最终结果。

在您的例子中，定义了两个 backgound-size 规则。根据您想要使用的 bg-cover 或 bg-contain Tailwind 类.

<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>

Tailwind CSS 将更多内联样式转换为实用工具类

Tailwind CSS convert more of these inline styles to utility classes

css

laravel

tailwind-css

Tailwind CSS 将更多内联样式转换为实用工具 类

Tailwind CSS convert more of these inline styles to utility classes

css

laravel

tailwind-css

Tailwind CSS 将更多内联样式转换为实用工具类