Tailwind CSS 颜色不适用于动态类。Vue.js + Vite

Question

这是我第一次使用 Tailwind\xc2\xa0CSS，我不明白为什么颜色不起作用。这是Laravel Jetstream的全新安装，附带 Tailwind CSS、Vue.js\xc2\xa03、Vite 和 Inertia。

\n

如果动态添加类，似乎不会从 Tailwind\xc2\xa0CSS 导入相关样式。

\n

这是一些基本组件：

\n

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

\n

尽管类存在，但使用类似的东西没有任何与颜色相关的样式：

\n

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

\n

但是，如果动态类也在同一页面的某处指定，那么一切都会正常。

\n

IE，

\n

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

\n

Answer 1

dynamic class是否建议在 a 中使用 a tailwind？

\n

答：没有

\n

\n

通常不建议使用dynamic classesin ，因为使用了，这意味着源文件中未指定的任何类都不会在输出文件中创建。因此建议使用tailwind-csstailwindtree-shakingcomplete class names

\n

\n

根据文件

\n

\n

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS

\n

\n

有解决办法吗？

\n

答：是的，在您的应用程序中使用安全列表类tailwind.config.cs

\n

\n

安全列表是最后的手段，仅应在无法扫描某些内容中的类名的情况下使用。这些情况很少见，您几乎不需要此功能。

\n

\n\n

特别是对于你来说，你想要有100 500 700深浅的颜色。您可以使用正则表达式来包含您想要使用的所有颜色pattern并相应地指定色调。

\n

variants注意：您也可以强制 Tailwind 创建：

\n

在tailwind.config.js

\n

module.exports = {\n  content: [\n    \'./pages/**/*.{html,js}\',\n    \'./components/**/*.{html,js}\',\n  ],\n  safelist: [\n    {\n      pattern: /bg-(red|green|blue|orange)-(100|500|700)/, // You can display all the colors that you need\n      variants: [\'lg\', \'hover\', \'focus\', \'lg:hover\'],      // Optional\n    },\n  ],\n  // ...\n}\n

\n

要包含所有bg-colors，您可以使用以下代码：

\n

module.exports = {\n  content: [\n     ...\n  ],\n  safelist: [\n    {\n      pattern: /bg-+/, //   This includes bg of all colors and shades\n    },\n  ],\n  ...\n}\n\n

\n