Tailwind CSS color在动态类上不起作用,Vue.js + Vite

rta7y2nd 于 2023-03-24 发布在 Vue.js

关注(0)|答案(2)|浏览(475)

这是我第一次使用Tailwind CSS，我不明白为什么颜色不起作用。这是一个新安装的Laravel Jetstream，它附带了Tailwind CSS，Vue.js 3，Vite和Inertia。
如果类是动态添加的，那么相关的样式似乎不会从Tailwind CSS中导入。
以下是一些基本组件：

<template>
    <div :class="style" class="border-l-4 p-4" role="alert">
        <p><slot name="headline"></slot></p>
        <p class="pt-3" v-if="slots.error"><span class="font-bold">Message:</span><slot name="error"></slot></p>
        <div class="my-3" v-if="slots.info"><slot name="info"></slot></div>
    </div>
</template>
<script setup>
    import { useSlots } from 'vue'
    const slots = useSlots()
</script>
<script>
export default {
    name: 'Alert',
    props: {
        color: {type: String, default: 'red'}
    },
    computed: {
        style() {
            return `bg-${this.color}-100 border-${this.color}-500 text-${this.color}-700`
        }
    }

}
</script>

使用这样的东西没有任何颜色相关的样式，尽管类在那里：

<Alert color="orange" class="my-5">
    <template #headline>Test</template>
</Alert>

但是如果动态类也在同一个页面的某个地方指定，那么一切都正常。
即：

<div class="bg-orange-100 border-orange-500 text-orange-700"></div>
<Alert color="orange" class="my-5">
        <template #headline>Test</template>
</Alert>

vue.js

来源：https://stackoverflow.com/questions/74957467/tailwind-css-color-is-not-working-on-dynamic-classes-vue-js-vite

2条答案

按热度按时间

mxg2im7a1#

这个问题相对容易解决。在 * 动态类名 * 中提到避免动态构造类名。
因此，在计算样式中，我只是有条件地指定完整的类名和所有可能的值。
它是从

style() {
    return `bg-${this.color}-100 border-${this.color}-500 text-${this.color}-700`
}

改为：

style() {
    const styles = {
        default : 'bg-cyan-100 border-cyan-500 text-cyan-700',
        red : 'bg-red-100 border-red-500 text-red-700',
        orange: 'bg-orange-100 border-orange-500 text-orange-700',
        green: 'bg-green-100 border-green-500 text-green-700',
        blue: 'bg-blue-100 border-blue-500 text-blue-700',
    }
    return styles[this.color] ?? styles.default
}

现在一切都很完美。

赞(0）回复(0）举报 2023-03-24

jtw3ybtb2#

在处理一些基本的动态类时，我经常使用的方法是简单地将所有可能的类放入文件中。我注意到，即使在注解行中指定了类，Tailwind CSS仍然会在任何文件中找到这些类时导入这些类的样式。
下面是一个例子：

<template>
    <div :class="`bg-${color}-100 border-${color}-500 text-${color}-700`" class="border-l-4 p-4" role="alert">
        test
    </div>
</template>
<script>
    /* All supported classes for color props
    bg-red-100 border-red-500 text-red-700
    bg-orange-100 border-orange-500 text-orange-700
    bg-green-100 border-green-500 text-green-700
    bg-blue-100 border-blue-500 text-blue-700
    */
    export default {
        name: 'Alert',
        props: {
            color: {type: String, default: 'red'}
        }
    }
</script>

所以现在所有这些都可以正常工作：

<Alert color="red"></Alert>
<Alert color="orange"></Alert>
<Alert color="green"></Alert>
<Alert color="blue"></Alert>

但是这个不会有任何样式，因为为紫色生成的类没有在任何文件中预先指定：

<Alert color="purple"></Alert>

赞(0）回复(0）举报 2023-03-24

我来回答

Tailwind CSS color在动态类上不起作用,Vue.js + Vite

2条答案

相关问题

热门标签

最新问答