边界 class 发生变化，但 div 不会移动

Question

我有一个带有 3 个可移动面板的边栏。我通过使用 -translate-x-(amount)（使用 TailwindCSS classes）将绑定 :class 更改为父级 <div> 来移动它。当我单击菜单按钮时，我看到 DOM 确实做出反应并使用正确的 translate-x- 值更改 class 但面板不会移动。

Link 到沙箱（出于某种原因，它可以在沙箱上运行 - 它也可以在我的 PC 上随机运行，但很少）：https://codesandbox.io/s/hopeful-cdn-o38n6?file=/src/App.vue

这是代码：

<template>
    <div class="h-screen flex">
        <div class="flex container w-40 h-80 bg-black mx-auto my-auto text-black overflow-hidden">
            <div class="sidebar container flex transform duration-1000" :class="position">

                <div class="sidebar-menu flex-shrink-0 w-40 transform duration-1000 bg-gray-300">
                    <button @click="currentIndex++">Menu item</button>
                </div>

                <div class="sidebar-menu flex-shrink-0 w-40 bg-blue-300 transform duration-1000">
                    <div class="flex flex-col">
                        <button class="flex justify-start" @click="currentIndex--">
                        Go back
                        </button>

                        <button class="flex justify-start" @click="currentIndex++">
                        Menu item
                        </button>
                    </div>
                </div>

                <div class="sidebar-menu flex-shrink-0 w-40 transform duration-1000 bg-red-300">
                    <div class="flex flex-col">
                        <button class="flex justify-start" @click="currentIndex--">
                        Go back
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: () => ({
            sidebarWidth: 40,
            currentIndex: 0
        }),
        computed: {
            position() {
                if (this.currentIndex === 0) {
                    
                    return 'translate-x-0'
                } else {                
                    
                    return `-translate-x-${this.sidebarWidth * this.currentIndex}`}
            }
        },
    }
</script>

Answer 1

为了跟踪您的错误原因，我看到您的代码有一个演示版本，例如 codesanbox。

演示

const app = new Vue({
  el: '#root',
  data: {
     sidebarWidth: 40,
            currentIndex: 0,
    message: 'TailWindCSS Dev',
          model: null,
  },
  
          computed: {
            position() {
                if (this.currentIndex === 0) {
                    
                    return 'translate-x-0'
                } else {                
                    
                    return `-translate-x-${this.sidebarWidth * this.currentIndex}`}
            }
        },
  
});

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<div id="root">
   <div class="flex justify-center">
     <p class="text-3xl text-yellow-600">{{message}}</p>
  </div>
  
  <template>
    <div class="h-screen flex">
        <div class="flex container w-40 h-80 bg-black mx-auto my-auto text-black overflow-hidden">
            <div class="sidebar container flex transform duration-1000" :class="position">

                <div class="sidebar-menu flex-shrink-0 w-40 transform duration-1000 bg-gray-300">
                    <button @click="currentIndex++">Menu item</button>
                </div>

                <div class="sidebar-menu flex-shrink-0 w-40 bg-blue-300 transform duration-1000">
                    <div class="flex flex-col">
                        <button class="flex justify-start" @click="currentIndex--">
                        Go back
                        </button>

                        <button class="flex justify-start" @click="currentIndex++">
                        Menu item
                        </button>
                    </div>
                </div>

                <div class="sidebar-menu flex-shrink-0 w-40 transform duration-1000 bg-red-300">
                    <div class="flex flex-col">
                        <button class="flex justify-start" @click="currentIndex--">
                        Go back
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
</div>

Answer 2

如果以后有人也会遇到这种奇怪的行为，我找到答案了：

问题出在 Tailwind 的 JIT 模式上：https://tailwindcss.com/docs/just-in-time-mode

它按需编译类 - 只有他在构建应用程序时看到正在使用的内容，在我的例子中，绑定类不会立即使用 - 仅在点击事件之后，所以 Tailwind可能在 JIT 模式下看不到这些类，所以我从 tailwind.config.js 中删除了行 mode: jit, 并且它起作用了

边界 class 发生变化，但 div 不会移动

The bound class changes but the div won't move

vue.js

tailwind-css