现状
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>
效果
结语
- 解决了类名过长问题
- 需要手动刷新页面才能看到样式修改