将 tailwind 和外部 CSS 转换为内联样式

Question

我正在使用顺风类以及外部样式表中定义的自定义类。我需要将代码转换为内联样式以便在其他地方使用。我该怎么做？

HTML：

<div class="lg:w-1/4 w-full h-auto px-4 py-2 bg-orange border-2 shadow-lg border-orange rounded-2xl flex gap-2 items-center">
    <img src="/Icons/illustration_no-payment.svg" alt="illustration_no-payment">
    <div class="h-auto flex flex-col justify-between">
        <h3 class="text-mont text-sm text-lblack font-bold">Oh no, your Payment Failed!</h3>
        <p class="text-mont text-xs text-l2black">Please contact us directly so we can put this right without delay. We appreciate your patience.</p>
    </div>
</div>

CSS：

.text-lblack {
    color: #1d1d1d;
}
.border-orange {
    border-color: #fd4949;
}
.text-l2black {
    color: #444445;
}

Answer 1

我正在寻找相同的答案，我想将我的反应组件的 tailwindcss 转换为内联样式以达到某种目的。你有解决这个问题吗