如何将基础CSS代码转换为TailwindCSS？

方法1：直接使用Tailwind内联工具类 #

直接在HTML元素上组合对应Tailwind类，无需额外CSS：

<!-- Approved状态 -->
<div class="p-[5px] rounded-[5px] text-green bg-[rgba(0,128,0,0.151)]">Approved</div>

<!-- Pending状态 -->
<div class="p-[5px] rounded-[5px] text-[goldenrod] bg-[rgba(189,189,3,0.103)]">Pending</div>

• p-[5px] 对应原CSS的padding: 5px
• rounded-[5px] 对应原CSS的border-radius: 5px
• 颜色类直接用原生颜色值或Tailwind内置色值，自定义透明度背景用bg-[...]语法

方法2：自定义组件（贴近原CSS复用逻辑） #

如果需要像原CSS那样复用.status基础样式，可在项目的CSS文件中用@layer components定义：

@layer components {
  .status {
    @apply p-[5px] rounded-[5px];
  }
  .status.Approved {
    @apply text-green bg-[rgba(0,128,0,0.151)];
  }
  .status.Pending {
    @apply text-[goldenrod] bg-[rgba(189,189,3,0.103)];
  }
}

然后在HTML中直接复用类名：

<div class="status Approved">Approved</div>
<div class="status Pending">Pending</div>

内容的提问来源于stack exchange，提问作者user12535353