Vue3整合Tailwindcss之margin样式类

<template>
  <div class="text-center">
    <button
      v-for="size in sizes"
      :key="size"
      :class="`inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 transition duration-150 ease-in-out ${size}`"
    >
      <!-- Tailwind CSS margin utilities -->
      <div :class="`mr-2 ${size}`">Button</div>
    </button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 定义不同尺寸的按钮
      sizes: [
        'mr-0', // 无外边距
        'mr-1', // 小外边距
        'mr-2', // 中等外边距
        'mr-3', // 大外边距
        'mr-4', // 更大外边距
        'mr-6', // 更大外边距
        'mr-8', // 最大外边距
      ]
    }
  }
}
</script>

这个代码实例展示了如何在Vue 3项目中使用Tailwind CSS的外边距样式类来控制按钮之间的间距。通过遍历数据中的尺寸数组，为每个按钮动态应用正确的外边距样式类。这样，开发者可以通过Tailwind CSS预定义的工具类来快速设置元素的外边距，而不用手写大量的CSS代码。