Vue + Tailwind 和动态类

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《Vue + Tailwind 和动态类》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

我最近在做的一个项目使用了 vite、vue 和 tailwind。

使用自定义颜色一段时间后，我遇到了一些困惑。

在模板中添加和使用自定义颜色不是问题 - 使用 tailwind 文档使该过程非常清晰

// tailwind.config.js
module.exports = {
    theme: {
        colors: {
          'custom-green': {
              50: '#9bd1b2',
              ...
              700: '#284735'
          },
        }
    }
}

我的问题是在 vue 模板中使用带有动态和静态 css 类的自定义颜色时。

使用 npm run dev 或 vite 运行项目时，bg-custom-green-50 或 text-custom-green-50 不起作用，并且从未出现在 css 文件中。

我的理解是，如果你的完整 css 类名不存在于模板中，那么 tailwind 不会添加它或在 css 文件中生成它。

假设 css 类：text-custom-green-50 或 bg-custom-green-50 未在项目中的其他任何地方使用

下面的例子将不起作用

<template>
    <h3 :class="['font-bold', colorclass]">{{ heading }}</h3>
</template>
<script type="text/javascript">
    const colorclass = ref('')

    // color being set somewhere else in the component logic
    colorclass.value = 'text-custom-green-50'
</script>

下面的例子将起作用

<template>
    <h3 :class="['font-bold', colorclass]">{{ heading }}</h3>
    <p class="text-custom-green">green text</p>
</template>
<script type="text/javascript">
    const colorclass = ref('')

    // color being set somewhere else in the component logic
    colorclass.value = 'text-custom-green-50'
</script>

两个示例之间的区别是 text-custom-green css 类添加到模板中，因此 tailwind 会将其添加到生成的 css 文件中。

要克服这个问题，您可以将任何自定义颜色或 tailwind 类添加到 tailwind.config.js 文件中的安全列表中。

// tailwind.config.js
module.exports = {
    safelist: [
        'text-custom-green-50',
        'bg-custom-green-50'
    ]
}

即使这些颜色没有直接在模板中使用，而是在另一点动态添加，它们也将可用

希望其他人觉得这有帮助。

今天关于《Vue + Tailwind 和动态类》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！