如何在 Tailwind CSS 中进行宽度转换？

Question

当我尝试使用 Tailwind 中的默认“w-#”选项进行转换时，我的转换不适用。当我在自己的类中硬编码宽度时，它工作正常。Tailwinds CSS 有什么奇怪的地方以及它如何处理会导致这种情况的宽度？

这是 HTML 文本。这里的主要部分是动态类“sidebarWidth”，它在按钮被点击时切换。全部过渡、最慢和轻松是我在 Tailwind 中扩展的所有内容。

<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-all transition-slowest ease" :class="sidebarWidth">

这是Vue组件的计算属性中的JS代码

sidebarWidth: function() {
      if (this.$store.getters.isSidebarCollapsed) {
        return "w-14 invisible md:visible";
      } else {
        return "w-64";
      }
    }

如果我将 w-14 和 w-64 换成以下课程，效果会很好。

sidebarWidth: function() {
      if (this.$store.getters.isSidebarCollapsed) {
        return "w-14 invisible md:visible";
      } else {
        return "w-64";
      }
    }

我基本上希望我的侧边栏导航在我单击按钮时滑入。在移动设备中，侧边栏导航是隐藏的，我希望它滑出。在桌面上，它应该是一个小的导航，然后滑出到全屏导航。它有效，但幻灯片过渡不起作用。此外，移动设备和桌面设备之间的边距变化确实可以正确设置动画。

Answer 1

您需要执行几个步骤来激活您正在寻找的行为。

第一个是关于通过tailwind.config.js. 您需要添加transitionPropertyfor width。

module.exports = {
    ...
    theme: {
        ...
        extend: {
            ...
            transitionProperty: {
                'width': 'width'
            },
        },
    },
}

上面的更改创建了transition-width类。只需将此应用到您的导航标签即可。在您的特定情况下，您可以覆盖transition-all该类。

<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-width transition-slowest ease" :class="sidebarWidth">

最后一步非常简单：确保 Tailwind 正在重新创建 CSS。之后，您应该会在项目中看到平滑的宽度过渡。

问题背景

默认情况下，Tailwind CSS 中不会激活宽度和高度过渡。这是使用transition类时将应用的 CSS 。

transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

就像您可以看到width并且height在transition-property.

您可以在Tailwind 文档 中找到有关它的更多信息。