这是我第一次使用顺风CSS，我不明白为什么颜色不起作用。这是一个新安装的Laravel Jetstream，附带了顺风CSS, Vue.js 3, Vite和惯性。
如果动态添加类，那么相关的样式似乎不会从顺风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>
这个问题比较容易解决。在动态类名中提到要避免动态构造类名.
因此，在computed样式中，我只是有条件地使用所有可能的值指定完整的类名。
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
}
现在一切都很顺利。
在处理一些基本的动态类时，我总是使用的方法是简单地将所有可能的类放入文件中。我注意到，即使在注释行中指定了类，当在任何文件中找到这些类时，顺风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>
是否建议在tailwind中使用dynamic class
答:没有
通常不建议在
tailwind-css中使用dynamic classes，因为tailwind使用tree-shaking，这意味着在源文件中未指定的任何类都不会在输出文件中创建。因此建议使用complete class names
根据Docs
如果您使用字符串插值或将部分类名连接在一起，Tailwind将不会找到它们，因此不会生成相应的CSS
是否有工作?
答:是的，在你的tailwind.config.cs
中使用safellisting类安全列表是最后的手段，只应该在无法扫描某些内容查找类名的情况下使用。这些情况很少见，您几乎不应该需要这个特性。
特别对你来说，你想有100 500 700色调的颜色。您可以使用正则表达式来包含使用pattern所需的所有颜色，并相应地指定色调。
注意:你也可以强制Tailwind创建variants:
Intailwind.config.js
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
safelist: [
{
pattern: /bg-(red|green|blue|orange)-(100|500|700)/, // You can display all the colors that you need
variants: ['lg', 'hover', 'focus', 'lg:hover'], // Optional
},
],
// ...
}
要包含所有bg-colors，可以使用以下代码:
module.exports = {
content: [
...
],
safelist: [
{
pattern: /bg-+/, // 👈 This includes bg of all colors and shades
},
],
...
}
TailwindCSS现在使用tree-shaking生成类(以减少导入冗余的css类)。解决方案:您应该使用列出类以确保它在。
https://tailwindcss.com/docs/content-configuration safelisting-classes
您可以在根目录下的tailwind.config.js文件中配置。在你的例子中，你可以为背景色，文本色，边框色，…创建安全列表
module.exports = {
//Rest of config goes here ...
safelist: [
{
pattern: /(from|via|to|border|bg|text)-(.*)-(d{1}0{1,2})/,
variants: [
"hover",
"active",
"focus",
"visited",
"focus-visible",
// It is recommended you comment out the items below this one and only uncomment them as needed
// Leaving all of these here causes hot reload to become extremely laggy
"first",
"last",
"odd",
"even",
"focus-within",
"target",
"only",
"first-of-type",
"last-of-type",
"only-of-type",
"empty",
"disabled",
"checked",
"indeterminate",
"default",
"required",
"valid",
"invalid",
"in-range",
"out-of-range",
"placeholder-shown",
"autofill",
"read-only",
],
},
],
};