如何在 Tailwindcss 中制作之后？答案

【问题标题】：How to make after in Tailwindcss?如何在 Tailwindcss 中制作之后？
【发布时间】：2021-07-12 21:00:50
【问题描述】：

我正在尝试将我的网站变成完整的 Tailwindcss，因为我正在学习它

如何在 Tailwindcss 中转换 AFTER 值？

        spanthis::before { 
        content: "OMANI"; 
        animation: animate infinite 3s; 
        padding-left: 10px; 
    } 

    @keyframes animate { 

        0% { 
            content: "OMANI"; 
        } 

        5% { 
            content: "COOL"; 
        } 

        15% { 
            content: "PROFESSIONAL"; 
        } }

【问题讨论】：

标签： tailwind-css

【解决方案1】：

更新：自 v2.2 Tailwind 现在支持之前/之后

Tailwind 不支持 before/after 伪类。

有关于它的开放功能请求：https://github.com/tailwindlabs/tailwindcss/discussions/2119

“完全顺风”并不一定意味着完全放弃 CSS 并内联所有内容。您也可以将@apply 与伪类结合使用。

但是如果你真的需要这个内联https://github.com/shimyshack/tailwindcss-pseudo-element-plugin

<ul class="inline-block">
  <li class="inline-block after:inline-block after:pseudo-content-comma after:mr-1">Item 1</li>
  <li class="inline-block after:inline-block after:pseudo-content-comma after:mr-1">Item 2</li>
  <li class="inline-block after:inline-block after:pseudo-content-oxford-ampersand after:mr-1">Item 3</li>
  <li class="inline-block">Item 4</li>
</ul>

【讨论】：