问题是图像选择器无法选择图像。 我在控制台中收到很多错误消息，指出 Alpine（函数名称）不是函数，并且 Alpine 表达式未定义。
这个高山代码确实有效：
<h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
我尝试过以下方法：
npx tailwindcss init
npm install alpinejs
<!--<?php //echo site_url('/node_modules/tailwindcss/dist/tailwind.min.css'); ?><!--" rel="stylesheet">-->
<!--<?php //echo site_url('/node_modules/alpinejs/dist/alpine.min.js'); ?><!--" defer>-->
plugins: [
// ...
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
代码片段：
<div class="flex flex-col-reverse" x-data="Components.tabs()" @tab-click.window="onTabClick"
@tab-keydown.window="onTabKeydown">
<!-- Image selector -->
<div class="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
<div class="grid grid-cols-4 gap-6" aria-orientation="horizontal" role="tablist">
<button id="tabs-1-tab-1"
class="relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
x-data="Components.tab(0)" aria-controls="tabs-1-panel-1" role="tab" x-init="init()"
@click="onClick" @keydown="onKeydown" @tab-select.window="onTabSelect" :tabindex="selected ? 0 : -1"
:aria-selected="selected ? 'true' : 'false'" type="button" tabindex="0" aria-selected="true">
<span class="sr-only">Angled view</span>
<span class="absolute inset-0 overflow-hidden rounded-md">
<img src="#" alt="" class="h-full w-full object-cover object-center">
</span>
<span class="pointer-events-none absolute inset-0 rounded-md ring-2 ring-offset-2 ring-indigo-500"
aria-hidden="true" x-state:on="Selected" x-state:off="Not Selected"
:class="{ 'ring-indigo-500': selected, 'ring-transparent': !(selected) }"></span>
</button>
<button id="tabs-1-tab-2"
class="relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
x-data="Components.tab(0)" aria-controls="tabs-1-panel-2" role="tab" x-init="init()"
@click="onClick" @keydown="onKeydown" @tab-select.window="onTabSelect" :tabindex="selected ? 0 : -1"
:aria-selected="selected ? 'true' : 'false'" type="button" tabindex="-1" aria-selected="false">
<span class="sr-only">Front view</span>
<span class="absolute inset-0 overflow-hidden rounded-md">
<img src="#" alt="" class="h-full w-full object-cover object-center">
</span>
<span class="ring-transparent pointer-events-none absolute inset-0 rounded-md ring-2 ring-offset-2"
aria-hidden="true" x-state:on="Selected" x-state:off="Not Selected"
:class="{ 'ring-indigo-500': selected, 'ring-transparent': !(selected) }"></span>
</button>
<button id="tabs-1-tab-3"
class="relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
x-data="Components.tab(0)" aria-controls="tabs-1-panel-3" role="tab" x-init="init()"
@click="onClick" @keydown="onKeydown" @tab-select.window="onTabSelect" :tabindex="selected ? 0 : -1"
:aria-selected="selected ? 'true' : 'false'" type="button" tabindex="-1" aria-selected="false">
<span class="sr-only">Back view</span>
<span class="absolute inset-0 overflow-hidden rounded-md">
<img src="#" alt="" class="h-full w-full object-cover object-center">
</span>
<span class="ring-transparent pointer-events-none absolute inset-0 rounded-md ring-2 ring-offset-2"
aria-hidden="true" x-state:on="Selected" x-state:off="Not Selected"
:class="{ 'ring-indigo-500': selected, 'ring-transparent': !(selected) }"></span>
</button>
<button id="tabs-1-tab-4"
class="relative flex h-24 cursor-pointer items-center justify-center rounded-md bg-white text-sm font-medium uppercase text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-offset-4"
x-data="Components.tab(0)" aria-controls="tabs-1-panel-4" role="tab" x-init="init()"
@click="onClick" @keydown="onKeydown" @tab-select.window="onTabSelect" :tabindex="selected ? 0 : -1"
:aria-selected="selected ? 'true' : 'false'" type="button" tabindex="-1" aria-selected="false">
<span class="sr-only">Back angle open view</span>
<span class="absolute inset-0 overflow-hidden rounded-md">
<img src="#" alt="" class="h-full w-full object-cover object-center">
</span>
<span class="ring-transparent pointer-events-none absolute inset-0 rounded-md ring-2 ring-offset-2"
aria-hidden="true" x-state:on="Selected" x-state:off="Not Selected"
:class="{ 'ring-indigo-500': selected, 'ring-transparent': !(selected) }"></span>
</button>
</div>
</div>
<div class="aspect-h-1 aspect-w-1 w-full">
<div id="tabs-1-panel-1" x-description="Tab panel, show/hide based on tab state."
x-data="Components.tabPanel(0)" aria-labelledby="tabs-1-tab-1" x-init="init()" x-show="selected"
@tab-select.window="onTabSelect" role="tabpanel" tabindex="0">
<img src="#" alt="Angled front view with bag zipped and handles upright."
class="h-full w-full object-cover object-center sm:rounded-lg">
</div>
<div id="tabs-1-panel-2" x-description="Tab panel, show/hide based on tab state."
x-data="Components.tabPanel(0)" aria-labelledby="tabs-1-tab-2" x-init="init()" x-show="selected"
@tab-select.window="onTabSelect" role="tabpanel" tabindex="0" style="display: none;">
<img src="#" alt="Front view with bag zipped and handles upright."
class="h-full w-full object-cover object-center sm:rounded-lg">
</div>
<div id="tabs-1-panel-3" x-description="Tab panel, show/hide based on tab state."
x-data="Components.tabPanel(0)" aria-labelledby="tabs-1-tab-3" x-init="init()" x-show="selected"
@tab-select.window="onTabSelect" role="tabpanel" tabindex="0" style="display: none;">
<img src="#" alt="Back view with bag zipped and straps hanging down."
class="h-full w-full object-cover object-center sm:rounded-lg">
</div>
<div id="tabs-1-panel-4" x-description="Tab panel, show/hide based on tab state."
x-data="Components.tabPanel(0)" aria-labelledby="tabs-1-tab-4" x-init="init()" x-show="selected"
@tab-select.window="onTabSelect" role="tabpanel" tabindex="0" style="display: none;">
<img src="#" alt="Back angled view with bag open and handles to the side."
class="h-full w-full object-cover object-center sm:rounded-lg">
</div>
</div>
</div>
我通过从 Tailwind 复制 JavaScript 函数代码解决了这个问题。