官网

现状

tailwindcss 提供了大量的语义化的类,能快速编写样式

存在问题

• 模版中大量的class代码导致业务逻辑难以分清和快速查找

解决

• 不能丢失提示
• 可以方便扩展

提示 vscode 扩展默认名称有这些

类似于下面这样才有提示

className="flex"

实现

css.ts

class header_d {
  // 类名称或者额外增加名称
  baseName = " header_d"

  // tailwindcss 自动提示
  className ="flex container";

  name(): string {
    return this.className + this.baseName
  }
}

export const css = {
  header_d: new header_d().name(),
}

index.vue

<script setup lang="ts">
import {css} from './css'
</script>

<template>
<div :class="css.header_d">info</div>
</template>

<style>
.header_d{
  height: 40px;
  background-color: salmon;
}
</style>

效果

结语

• 解决了类名过长问题
• 需要手动刷新页面才能看到样式修改