我如何使用第一个：tailwindcss 前缀与 alpinejs x-for答案

【问题标题】：How can i use the first: tailwindcss prefix in combination with an alpinejs x-for我如何使用第一个：tailwindcss 前缀与 alpinejs x-for
【发布时间】：2021-12-31 21:19:40
【问题描述】：

我正在使用 alpinejs x-for 循环构建一个按钮组，其中第一个和最后一个按钮应该使用 first:rounded-l-md 和 last:rounded-r-md 具有 rounded-l-md 和 rounded-r-md。 last:rounded-r-md 工作正常，但 first:rounded-l-md 不起作用，因为我认为用于循环的 <template> 被视为第一个元素。

我添加了一个 jsfiddle：https://jsfiddle.net/20qega7d/

【问题讨论】：

标签： tailwind-css alpine.js tailwind-ui

【解决方案1】：

我认为是因为模板标签中的第一个元素，但为了得到你想要的，我做了一个扭曲，我添加了一个key，因为它在x-for 中被推荐。现在我返回了for in loop中的数组索引，然后绑定一个类来检查索引是否为空，它应该添加rounded-l-md。

<!-- Include CDN JavaScript -->
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- Specify a custom TailwindCSS configuration -->
<script type="tailwind-config">
  {
    variants: {
        extend: {
            borderRadius: ['last, first'],
        },
    },
}
</script>

<div class="p-10" x-data="{ timeframes: [{id: 1, n: '1d'}, {id: 2, n: '1w'}, {id: 3, n: '1y'}] }">
  <span class="relative z-0 inline-flex shadow-sm rounded-md">
    <template x-for="(timeframe, index) in timeframes" :key="timeframe.id">
    <button type="button" class="-ml-px relative inline-flex items-center px-4 py-2 last:rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
    :class="{'rounded-l-md' : !index}"
    >
        <span x-text="timeframe.n"></span>
      </button>      
    </template>
  </span>
</div>

【讨论】：