在 tailwind css 中自定义过渡

Question

我正在开发仪表板，最近 adam (tailwindcss) 在 trello 的看板上制作了一个类似仪表板的屏幕。我喜欢它并且正在努力实施它。我遇到的问题与他在屏幕播放中使用的过渡效果有关。他们还没有顺风css，但将来会。我做了一些挖掘并能够实施它。但是问题如下。



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


}

它创建了所有必需的 classes。另外，通常情况下，class 以 - 作为开始，例如 .-class-name 不会因为某些未知原因而变成正常的 css。但在这里它正在工作并解决了很多问题。

在 tailwind css 中自定义过渡

Custominze transition in tailwaindcss

css

sass

css-transitions

tailwind-css