在tailwaindcss中自定义转换

Question

我正在开发一个仪表板，最近adam(tailwindcss(在类似trello的仪表板的看板上进行了scren转换。我喜欢它，并试图实现它。我现在的问题与他在屏幕演员阵容中使用的过渡效果有关。它们还没有在tailwindcss中，但将来会的。我做了一些挖掘，并能够实现它。但问题如下。

.translate-x-full {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.-translate-x-full {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.translate-x-0 {
-webkit-transform: translateX(0);
transform: translateX(0);
}

这是进行转换的css代码，它工作得很好，因为我只在桌面模式下有问题，其中.-translate-x-full实现了这一点，即使我使用lg:translate-x-0'. This might be due as tailwindcss don't have transition as of yet. so my question is, how can i makelg:translate-x-0工作和重写，.-translate-x-full效果。

下面是旁边菜单中的代码：

<div 
:class="sideBarOpen ? 'translate-x-0 ease-out transition-medium': '-translate-x-full ease-in transition-medium'"
class="aside fixed z-30 inset-y-0 left-0 w-64 px-8 py-4 bg-gray-100 border-r border overflow-auto lg:translate-x-0 lg:static lg:inset-auto"
>
</div>

Answer 1

找到了一个我需要的解决方案。

为了让我的自定义css响应，我只需要把它放在responsive包装中，如下所示：

@responsive {
.translate-x-full {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.-translate-x-full {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.translate-x-0 {
-webkit-transform: translateX(0);
transform: translateX(0);
}

}

它创建了所有必需的类。另外，通常情况下，以-作为起始的类(如.-class-name(由于某种未知原因不会编译为normal-css。但在这里，to正在发挥作用，并解决了许多问题。