Q：如何在 Laravel 中使用 Alpine Js 和 tailwind css？答案

【问题标题】：Q: how to make use of Alpinejs and tailwindcss within Laravel?Q：如何在 Laravel 中使用 Alpine Js 和 tailwind css？
【发布时间】：2022-02-14 14:18:53
【问题描述】：

我正在尝试使用 Adam Wathan's responsive navbar 使用 vuejs 来使用 Alpinejs，但我正在尝试是否可以让它与 Alpinejs 一起使用。

app.blade.php

<head>

  [...]

      <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

  [...]

</head>

如果您想知道 Alpine 是否已经加载，它正在尝试一个简单的下拉切换，但使用这种方法我发现很难让它工作。

Navbar.blade.php

@guest('applicant')
@else
<header class="bg-gray-900 sm:flex sm:items-center sm:justify-between xl:bg-white" x-data="dropdown()">
  <div class="flex justify-between px-4 py-3 xl:w-72 xl:bg-gray-900 xl:justify-center xl:py-5">
    <div>
      [...]
    </div>
    <div class="flex sm:hidden">
      <button x-on:click="open" type="button"
        class="px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white">
        <svg class="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path x-if="isOpen" fill-rule="evenodd" clip-rule="evenodd"
            d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
          <path x-if="!isOpen" fill-rule="evenodd"
            d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
        </svg>
      </button>
    </div>
  </div>
  <nav class="sm:flex sm:items-center sm:px-4 xl:flex-1 xl:justify-between"
    :class="{ 'hidden': !isOpen, 'block': isOpen }" x-show="open" x-on:click.away="close">
    <div class="hidden xl:block xl:relative xl:max-w-xs xl:w-full">
      [...]
    </div>
    <div class="sm:flex sm:items-center">
      [...]
      <div class="relative px-5 py-5 sm:py-0 sm:ml-4 sm:px-0">
        [...]
        <Dropdown class="hidden sm:block">
          <template #trigger="{ hasFocus, isOpen }">
            <span class="block h-8 w-8 overflow-hidden rounded-full border-2 "
              :class="[(hasFocus || isOpen) ? 'border-white xl:border-indigo-500' : 'border-gray-600 xl:border-gray-300']">
              <img class="h-full w-full object-cover"
                src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80"
                alt="">
            </span>
          </template>
          <template #dropdown>
            <div class="mt-3 bg-white xl:border rounded-lg w-48 py-2 shadow-xl">
              <a href="#account" class="block hover:text-white text-gray-800 px-4 py-2 hover:bg-indigo-500">Account
                settings</a>
              <a href="#support"
                class="block hover:text-white text-gray-800 mt-0 px-4 py-2 hover:bg-indigo-500">Support</a>
              <a href="#sign-out" class="block hover:text-white text-gray-800 mt-0 px-4 py-2 hover:bg-indigo-500">Sign
                out</a>
            </div>
          </template>
        </Dropdown>
      </div>
    </div>
  </nav>
</header>

<script>
function dropdown() {
  return {
    open: false,
    open() {
      this.show = true
    },
    close() {
      this.show = false
    },
    toggle() {
      this.isOpen = !this.isOpen
    },
  }
}
</script>
@endguest

【问题讨论】：

标签： laravel alpine.js

【解决方案1】：

您无需添加脚本即可打开和关闭下拉菜单。您需要在父级（按钮和下拉菜单）div 中定义x-data。然后在按钮和/或下拉元素中引用它。

一个简单的例子：

<div x-data="{isOpen : false}"> 
  
  <button x-on:click="isOpen = !isOpen" class="button">Menu</button>
  <!-- you need to toggle isOpen state on click. You can also use @click just like in vue -->

   <div x-show="isOpen" class="dropdown"> <!-- x-show to show and hide -->
     <a href="#account" class="your classes">Account settings</a>
     <a href="#support" class="">Support</a>
   </div>
    
</div>

这就是使用 alpine js 制作下拉菜单的全部内容。

【讨论】：

很难让它与Hidden sm:hidden sm:block 实用程序一起工作，这与您建议的过程完全一样，谢谢先生:)
很高兴我能帮上忙。祝你好运:)

【解决方案2】：

在我的情况下，我没有安装我的 javascript，我只是使用了 cdn

 {{-- scrip --}}
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

并且已经安装了tailwind css。我的代码是..

                    <div x-data="{dropdownMenu: false}" class="lg:inline-block relative">
                        <!-- Dropdown toggle button -->
                        <button @click="dropdownMenu = ! dropdownMenu"
                            class="text-base no-underline   hover:bg-indigo-300 hover:text-cool-gray-900 rounded-3xl  py-1 px-2 ">
                            <span class="sr-only">{{ Auth::user()->name }}</span>
                            <img class="h-8 w-8 rounded-full"
                                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60"
                                alt="avatar">
                        </button>
                        <!-- Dropdown list -->
                        <div x-show="dropdownMenu"
                            class="absolute right-0 py-2 mt-2 bg-white bg-gray-100 rounded-md shadow-xl w-44">
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                                Your Profile
                            </a>

                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                                Settings
                            </a>
                            <a href="#"
                                class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">
                                Reports
                            </a>
                            <a href="{{ route('logout') }}"
                                class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white"
                                onclick="event.preventDefault();document.getElementById('logout-form').submit();">{{ __('Logout') }}</a>
                            <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                class="hidden">
                                {{ csrf_field() }}
                            </form>
                        </div>
                    </div>

这是我点击头像时的结果..

我希望这将帮助您解决您的问题

【讨论】：