tailwindcss结合vue实现三个按钮点击一个亮另一个不亮的案例不要创建组件

要实现这个案例，你可以在Vue的模板中使用Tailwind CSS的类来控制按钮的样式，并使用Vue的事件绑定来处理按钮的点击事件。

以下是一个简单的例子：

<template>
  <div>
    <button :class="{ 'bg-blue-500': active === 1, 'bg-gray-500': active !== 1 }" @click="setActive(1)">
      按钮1
    </button>
    <button :class="{ 'bg-blue-500': active === 2, 'bg-gray-500': active !== 2 }" @click="setActive(2)">
      按钮2
    </button>
    <button :class="{ 'bg-blue-500': active === 3, 'bg-gray-500': active !== 3 }" @click="setActive(3)">
      按钮3
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1
    };
  },
  methods: {
    setActive(index) {
      this.active = index;
    }
  }
};
</script>

<style>
button {
  padding: 10px;
  margin: 5px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #3182ce;
}

button:focus {
  outline: none;
}
</style>

在上面的例子中，我们使用了v-bind:class指令来动态绑定按钮的类。根据active的值来判断哪个按钮应该亮起，我们使用了三元表达式来设置bg-blue-500类（亮的颜色）或bg-gray-500类（不亮的颜色）。

@click指令用于绑定按钮的点击事件，当点击按钮时，setActive方法会被调用，将active的值更新为对应按钮的索引。

最后，我们在样式中定义了按钮的基本样式，并使用了一些Tailwind CSS的类来设置背景颜色和其他样式