我无法让Alpine和Phoenix LiveView一起工作。
使用下面提供的代码，liveview phx-click事件不会触发，但Alpine可以工作。Tailwind指定的CSS动画不会在页面加载时激活，但Tailwind指定的其他CSS属性可以正确地设置元素的样式。页面上有一张卡片，应该在页面加载时翻转，但它只是加载，从未翻转。
如果我删除Alpine.start()，alpine在页面加载时 * 不能 * 正常工作，但在我点击此页面上的liveview组件链接后，它会开始工作，如下所示：<.link navigate={~p"/lessons"}> .所有的Tailwind css，包括动画，工作正常。Alpine * 的某些部分确实 * 在页面加载中起作用。页面上具有x-show="open"的元素是隐藏的，因为其父元素具有x-data="{ open: false }"。@click="open - !open"确实更改了open的值。什么's breaked是x-show在open的值改变时不改变display: none属性的方式。
如果我移除liveSocket.connect()，alpine会在页面加载上工作，但是当然liveview不会工作。卡不会翻转。它只是翻转加载。我不明白为什么移除套接字连接会破坏CSS。
如果我将Alpine.start()移动到liveSocket.connect()之后 *，Alpine将无法加载页面，但所有Tailwind css和liveview功能可以正常工作。
令人费解的是（对我来说），如果我删除 * Alpine.start()和liveSocket.connect()，阿尔卑斯山在页面加载上工作得很好，但在这里当然也不工作。
我很坚韧搜索Alpine.start()实际上做了什么，更糟糕的是，我很难理解它与liveSocket.connect()的交互。
app.js的相关部分

import Alpine from '../vendor/alpine'
window.Alpine = Alpine
Alpine.start()

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
    params: { _csrf_token: csrfToken },
    hooks: Hooks,
    dom: {
        onBeforeElUpdated(from, to) {
            if (from._x_dataStack) {
                window.Alpine.clone(from, to)
            }
        }
    },
})

// connect if there are any LiveViews on the page
liveSocket.connect()

nav.ex的相关部分，带电部件

<div class="relative ml-3" x-data="{ open: false }">
  <button
    @click="open = !open"
    @click.outside="open = false"
    type="button"
    class="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-green focus:ring-offset-2"
    id="user-menu-button"
    aria-expanded="false"
    aria-haspopup="true"
  >
    <span class="sr-only">Open user menu</span>
    <img
      class="h-8 w-8 rounded-full"
      src="https://i.kym-cdn.com/photos/images/facebook/001/431/201/40f.png"
      alt=""
    />
  </button>
  <!--
    Dropdown menu, show/hide based on menu state.
  -->
  <div
    class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
    role="menu"
    aria-orientation="vertical"
    aria-labelledby="user-menu-button"
    tabindex="-1"
    x-show="open"
    x-transition:enter="transition ease-out duration-100"
    x-transition:enter-start="transform opacity-0 scale-95"
    x-transition:enter-end="transform opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-75"
    x-transition:leave-start="transform opacity-100 scale-100"
    x-transition:leave-end="transform opacity-0 scale-95"
    x-cloak
  >...</div>