TailwindCSS动态类在Reactjs中没有编译。

huangapple
go评论121阅读模式
英文:

TailwindCSS Dynamic classes aren't comiled in reactjs

问题

在自定义的 React 组件中，我通过 props 传递了颜色名称，并像这样使用它：

  1. <div className={`bg-${color}-100 mx-auto p-5 inline-block rounded-full`}>
  2.   <div className={`border-4 p-3 border-${color}-800 rounded-full`}>
  3.     <Icon name={icon} className={`text-6xl text-${color}-800`} />
  4.   </div>
  5. </div>

颜色是在 tailwind.config.js 文件中扩展的，如下所示：

  1. export default {
  2.   content: [
  3.     "./index.html",
  4.     "./src/**/*.{js,ts,jsx,tsx}",
  5.   ],
  6.   theme: {
  7.     extend: {
  8.       colors: {
  9.         'primary': {
  10.           '50': '#f0f9ff',
  11.           '100': '#e0f2fe',
  12.           // 其他颜色...
  13.         },
  14.         // 其他颜色...
  15.       },
  16.     },
  17.   },
  18.   safelist: [
  19.     'bg-primary-100',
  20.     'bg-secondary-100',
  21.     'bg-success-100',
  22.     'bg-warning-100',
  23.     'bg-danger-100',
  24.     'text-danger-800',
  25.     'border-danger-800'
  26.   ],
  27.   plugins: [],
  28. };

我通过使用 safelist 暂时解决了这个问题，但我需要更多的类，无法手动将它们添加到 safelist 中。

我想通过 props 传递颜色，并希望它们由 tailwindcss 编译。

英文:

I was passing color name through props in custom react component.
And using it like this.

  1. &lt;div className={`bg-${color}-100 mx-auto p-5 inline-block rounded-full`}&gt;
  2.   &lt;div className={`border-4 p-3 border-${color}-800 rounded-full`}&gt;
  3.     &lt;Icon name={icon} className={`text-6xl text-${color}-800`} /&gt;
  4.   &lt;/div&gt;
  5. &lt;/div&gt;

The colors are extend in tailwind.config.js file.

  1. /** @type {import(&#39;tailwindcss&#39;).Config} */
  2. export default {
  3.   content: [
  4.     &quot;./index.html&quot;,
  5.     &quot;./src/**/*.{js,ts,jsx,tsx}&quot;,
  6.   ],
  7.   theme: {
  8.     extend: {
  9.       colors: {
  10.         &#39;primary&#39;: {
  11.           &#39;50&#39;: &#39;#f0f9ff&#39;,
  12.           &#39;100&#39;: &#39;#e0f2fe&#39;,
  13.           &#39;200&#39;: &#39;#bbe6fc&#39;,
  14.           &#39;300&#39;: &#39;#7ed3fb&#39;,
  15.           &#39;400&#39;: &#39;#3abcf6&#39;,
  16.           &#39;500&#39;: &#39;#10a4e7&#39;,
  17.           &#39;600&#39;: &#39;#0485c7&#39;,
  18.           &#39;700&#39;: &#39;#05699f&#39;,
  19.           &#39;800&#39;: &#39;#085984&#39;,
  20.           &#39;900&#39;: &#39;#0d4a6d&#39;,
  21.           &#39;950&#39;: &#39;#092f48&#39;,
  22.         },
  23.         // Other colors...
  24.       },
  25.     },
  26.   },
  27.   safelist: [
  28.     &#39;bg-primary-100&#39;,
  29.     &#39;bg-secondary-100&#39;,
  30.     &#39;bg-success-100&#39;,
  31.     &#39;bg-warning-100&#39;,
  32.     &#39;bg-danger-100&#39;,
  33.     &#39;text-danger-800&#39;,
  34.     &#39;border-danger-800&#39;
  35.   ],
  36.   plugins: [],
  37. };

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：

不要动态构建类名

  1. <div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的示例中，字符串text-red-600和text-green-600不存在，因此Tailwind不会生成这些类。
相反，请确保您使用的任何类名都完整存在：

始终使用完整的类名

  1. <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

您可以考虑使用类似以下的字典：

  1. const COLORS = {
  2.   primary: {
  3.     bg: 'bg-primary-100',
  4.     border: 'border-primary-800',
  5.     text: 'text-primary-800',
  6.   },
  7.   // …
  8. };
  9. // …
  10. <div className={`${COLORS[color].bg} mx-auto p-5 inline-block rounded-full`}>
  11.   <div className={`border-4 p-3 ${COLORS[color].border} rounded-full`}>
  12.     <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
&gt; &lt;div class=&quot;text-{{ error ? &#39;red&#39; : &#39;green&#39; }}-600&quot;&gt;&lt;/div&gt;
&gt;
> 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
&gt; &lt;div class=&quot;{{ error ? &#39;text-red-600&#39; : &#39;text-green-600&#39; }}&quot;&gt;&lt;/div&gt;
&gt;

You could consider using a dictionary like:

  1. const COLORS = {
  2.   primary: {
  3.     bg: &#39;bg-primary-100&#39;,
  4.     border: &#39;border-primary-800&#39;,
  5.     text: &#39;text-primary-800&#39;,
  6.   },
  7.   // …
  8. };
  9. // …
  10. &lt;div className={`${COLORS[color].bg} mx-auto p-5 inline-block rounded-full`}&gt;
  11.   &lt;div className={`border-4 p-3 ${COLORS[color].border} rounded-full`}&gt;
  12.     &lt;Icon name={icon} className={`text-6xl ${COLORS[color].text}`} /&gt;

huangapple
  • 本文由 发表于 2023年7月23日 16:55:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/76747392.html
  • css
  • javascript
  • reactjs
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定