Windi CSS 宽高工具类简写与示例

<template>
  <div class="bg-black h-50px w-50px border-10 p-10px m-10 box-border"></div>
  <div class="bg-black h-50px w-50px border-10 p-10px m-10 box-content"></div>

  <div class="flex justify-around align-middle flex-wrap bg-black">
    <div
      v-for="(value, index) in cfg"
      :key="index"
      class="flex align-middle justify-between w-screen mt-10px"
    >
      <div v-for="(item, subIndex) in value" :key="subIndex">
        <div :class="[baseClass, item]">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const baseClass = ref(
  'leading-150px bg-red-500 m-auto text-white whitespace-nowrap',
);
// 'w-screen h-150px'
const cfg = ref({
  widthCfg: ['w-150px h-150px', 'w-auto h-auto', 'w-px h-px', 'w-full h-full'],
  minWidthCfg: [
    'min-w-150px min-h-150px',
    'min-w-auto min-h-auto',
    'min-w-px min-h-px',
    'min-w-full min-h-full',
    // 'min-w-screen min-h-150px'
  ],
});
</script>