英文:
TailwindCSS Dynamic classes aren't comiled in reactjs
问题
在自定义的 React 组件中，我通过 props 传递了颜色名称，并像这样使用它：
<div className={`bg-${color}-100 mx-auto p-5 inline-block rounded-full`}>
<div className={`border-4 p-3 border-${color}-800 rounded-full`}>
<Icon name={icon} className={`text-6xl text-${color}-800`} />
</div>
</div>
颜色是在 tailwind.config.js 文件中扩展的，如下所示：
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
'primary': {
'50': '#f0f9ff',
'100': '#e0f2fe',
// 其他颜色...
},
// 其他颜色...
},
},
},
safelist: [
'bg-primary-100',
'bg-secondary-100',
'bg-success-100',
'bg-warning-100',
'bg-danger-100',
'text-danger-800',
'border-danger-800'
],
plugins: [],
};
我通过使用 safelist 暂时解决了这个问题，但我需要更多的类，无法手动将它们添加到 safelist 中。
我想通过 props 传递颜色，并希望它们由 tailwindcss 编译。
英文:
I was passing color name through props in custom react component.
And using it like this.
<div className={`bg-${color}-100 mx-auto p-5 inline-block rounded-full`}>
<div className={`border-4 p-3 border-${color}-800 rounded-full`}>
<Icon name={icon} className={`text-6xl text-${color}-800`} />
</div>
</div>
The colors are extend in tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
'primary': {
'50': '#f0f9ff',
'100': '#e0f2fe',
'200': '#bbe6fc',
'300': '#7ed3fb',
'400': '#3abcf6',
'500': '#10a4e7',
'600': '#0485c7',
'700': '#05699f',
'800': '#085984',
'900': '#0d4a6d',
'950': '#092f48',
},
// Other colors...
},
},
},
safelist: [
'bg-primary-100',
'bg-secondary-100',
'bg-success-100',
'bg-warning-100',
'bg-danger-100',
'text-danger-800',
'border-danger-800'
],
plugins: [],
};
I temporarily fixed the problem by using safelist. But I need more classes and I can't add them mannually in safelist.
I want to pass colors through props and want them to be compiled by tailwindcss.
答案1
得分: 0
根据文档：
Tailwind提取类名的最重要影响是它只会找到存在于您的源文件中的_完整不中断的字符串_。
如果您使用字符串插值或连接部分类名，Tailwind将无法找到它们，因此不会生成相应的CSS：
不要动态构建类名
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
在上面的示例中，字符串
text-red-600和text-green-600不存在，因此Tailwind不会生成这些类。
相反，请确保您使用的任何类名都完整存在：
始终使用完整的类名
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
您可以考虑使用类似以下的字典：
const COLORS = {
primary: {
bg: 'bg-primary-100',
border: 'border-primary-800',
text: 'text-primary-800',
},
// …
};
// …
<div className={`${COLORS[color].bg} mx-auto p-5 inline-block rounded-full`}>
<div className={`border-4 p-3 ${COLORS[color].border} rounded-full`}>
<Icon name={icon} className={`text-6xl ${COLORS[color].text}`} />
英文:
As per the documentation:
> The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.
>
> If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:
>
> Don’t construct class names dynamically
>
> vue
> <div class="text-{{ error ? 'red' : 'green' }}-600"></div>
>
> In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.
> Instead, make sure any class names you’re using exist in full:
>
> Always use complete class names
>
> vue
> <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
>
You could consider using a dictionary like:
const COLORS = {
primary: {
bg: 'bg-primary-100',
border: 'border-primary-800',
text: 'text-primary-800',
},
// …
};
// …
<div className={`${COLORS[color].bg} mx-auto p-5 inline-block rounded-full`}>
<div className={`border-4 p-3 ${COLORS[color].border} rounded-full`}>
<Icon name={icon} className={`text-6xl ${COLORS[color].text}`} />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论