当前位置: 首页> 教育> 就业 > Vue3整合Tailwindcss实现渲染动态类

Vue3整合Tailwindcss实现渲染动态类

时间:2025/7/11 9:28:22来源:https://blog.csdn.net/qq_37703224/article/details/139938611 浏览次数:0次

创建项目

pnpm create vite

整合Tailwindcss

安装依赖:

pnpm install -D tailwindcss postcss autoprefixer

生成配置文件:

npx tailwindcss init

postcss.config.js

export default {plugins: {tailwindcss: {},autoprefixer: {},}}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {content: ["./src/**/*.{html,js,vue}"],theme: {extend: {},},plugins: [],
}

src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

src/App.vue

<template><h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>

实现动态渲染样式

<script setup>
const styleStr = "underline"
</script>
<template><h1 class="text-3xl font-bold" :class="`${styleStr}`">Hello world!</h1>
</template>

可能有问题的代码

<script setup>
import {ref} from "vue";let prefixes = ["bg-slate-","bg-gray-","bg-zinc-","bg-neutral-","bg-stone-","bg-red-","bg-orange-","bg-amber-","bg-yellow-","bg-lime-","bg-green-","bg-emerald-","bg-teal-","bg-cyan-","bg-sky-","bg-blue-","bg-indigo-","bg-violet-","bg-purple-","bg-fuchsia-","bg-pink-","bg-rose-"
]
let colorScores = Array.from(Array(10), (v, k) => k * 100)const colors = ref([])for (let prefix of prefixes) {for (let colorScore of colorScores) {colors.value.push(`${prefix}${colorScore}`)}
}</script><template><div v-for="(color, index) in colors" :key="index" :class="`${color}`">{{ color }}</div>
</template>

问题解决

第一步:写死的多个背景

<script setup></script><template><div class="flex gap-3 flex-wrap justify-between p-8 bg-indigo-50"><div class="w-32 h-12 bg-orange-100"></div><div class="w-32 h-12 bg-orange-200"></div><div class="w-32 h-12 bg-orange-300"></div><div class="w-32 h-12 bg-orange-400"></div><div class="w-32 h-12 bg-orange-500"></div><div class="w-32 h-12 bg-orange-600"></div><div class="w-32 h-12 bg-orange-700"></div><div class="w-32 h-12 bg-orange-800"></div><div class="w-32 h-12 bg-orange-900"></div></div>
</template>

在这里插入图片描述

第二步:弄成数组

<script setup>
const colors = ["bg-orange-100","bg-orange-200","bg-orange-300","bg-orange-400","bg-orange-500","bg-orange-600","bg-orange-700","bg-orange-800","bg-orange-900",
]
</script><template><div class="flex gap-3 flex-wrap justify-between p-8 bg-indigo-50"><divv-for="(color, index) in colors":key="index"class="w-32 h-12":class="color"></div></div>
</template>

在这里插入图片描述

第三步:动态拼接更丰富的背景样式类


关键字:Vue3整合Tailwindcss实现渲染动态类

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: