Windi CSS 字体与文本工具类速查（含下划线）

简写-属性值

简写	属性值
`text-32px`	`font-size`
`antialiased`	`-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;`
`subpixel-antialiased`	`-webkit-font-smoothing: auto;-moz-osx-font-smoothing: auto;`
`italic`	`font-style: italic`
`not-italic`	`font-style: normal`
`font-600`	`font-weight: 600`
`tracking-2px`	`letter-spacing`
`leading-60px`	`line-height`
`text-left text-center text-right text-justify`	`text-align`
`text-blue-500`	`color`
`leading-60px`	`line-height`
`indent-10px`	`text-indent`
`text-opacity-50`	`--tw-text-opacity: 0.5;`
`uppercase lowercase 'capitalize normal-case`	`text-transform`
`align-baseline align-top align-middle align-bottom align-text-top align-text-bottom`	`vertical-align`
`whitespace-normal whitespace-nowrap whitespace-pre whitespace-pre-line whitespace-pre-wrap`	`white-space`
`break-normal break-words break-all`	`word-break`

underline 属性相关

简写	属性值
`underline line-through no-underline`	`text-decoration-line`
`underline-solid underline-double underline-dotted underline-dashed`	`text-decoration-style`
`underline-blue-500 underline-transparent`	`text-decoration-color`
`underline-opacity-50`	`--tw-line-opacity: 0.5;`
`underline-18px`	`text-decoration-thickness: 6px;`
`underline-offset-3px`	`text-underline-offset: 8px;`
`underline-offset-3px`	`text-underline-offset: 8px;`

示例

<template>
  <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"
        :style="{ width: 100 / value.length + '%' }"
      >
        <div :class="[baseClass, item]">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

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

const baseClass = ref(
  'w-100px h-60px bg-red-500 m-auto text-white whitespace-nowrap',
);

const cfg = ref({
  antialiased: ['text-32px antialiased', 'text-10px subpixel-antialiased'],
  italic: ['italic', 'no-italic'],
  weight: ['font-400', 'font-600'],
  letter: ['tracking-0px', 'tracking-2px'],
  lHeight: ['leading-60px', 'leading-30px', 'leading-1'],
  align: ['text-left', 'text-center', 'text-right', 'text-justify'],
  color: ['text-transparent', 'text-black', 'text-white', 'text-blue-500'],
  indent: ['测试', 'indent-0em', 'indent-2em', 'indent-10px'],
  opacity: ['text-opacity-0', 'text-opacity-50', 'text-opacity-100'],
  uppercase: ['uppercase', 'lowercase', 'capitalize', 'normal-case'],
  verticalAlign: [
    'align-baseline',
    'align-top',
    'align-middle',
    'align-bottom',
    'align-text-top',
    'align-text-bottom',
  ],
  wrap: [
    'whitespace-normal',
    'whitespace-nowrap',
    'whitespace-pre',
    'whitespace-pre-line',
    'whitespace-pre-wrap',
  ],
  break: [
    'break-normal !whitespace-normal ',
    'break-words !whitespace-normal ',
    'break-all !whitespace-normal ',
  ],
  underline: ['underline', 'line-through', 'no-underline'],
  underlineStyle: [
    'underline-solid underline',
    'underline-double underline',
    'underline-dotted underline',
    'underline-dashed underline',
  ],
  underlineColor: [
    'underline-transparent underline',
    'underline-black underline',
    'underline-white underline',
    'underline-blue-500 underline',
  ],
  underlineOpacity: [
    'underline-opacity-0 underline-green-100 underline',
    'underline-opacity-50 underline-green-100 underline',
    'underline-opacity-100 underline-green-100 underline',
  ],
  underlineHeight: [
    'underline-18px underline-white underline',
    'underline-18px underline-white underline',
    'underline-18px underline-white underline',
  ],
  underlineOffset: [
    'underline-offset-3px underline-3px underline-white underline',
    'underline-offset-13px underline-3px underline-white underline',
    'underline-offset-23px underline-3px underline-white underline',
  ],
});
</script>

<style scoped></style>