Tailwind组件中的动态颜色问题

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

Trouble with Dynamic Color in Tailwind Component

问题

我遇到了困难,不理解为什么蓝色在我的组件中不起作用。您能帮我在Stack Overflow上解决这个问题吗?我有一个应用不同背景和文本颜色的Tag组件,根据提供的color属性。然而,当我将color属性设置为“blue”时,组件没有应用预期的蓝色。我尝试过各种解决方案,包括动态构建类名和使用Tailwind CSS类的正确语法。然而,我未能解决这个问题。对您提前的任何帮助都将不胜感激!

英文:

I'm having trouble understanding why the blue color is not working in my component. Could you please help me troubleshoot this issue on Stack Overflow? I have a Tag component that should apply different background and text colors based on the color prop provided. However, when I set the color prop to "blue", the expected blue color is not being applied to the component. I have tried various solutions, including dynamically constructing the class names and using the correct syntax for Tailwind CSS classes. However, I have been unsuccessful in resolving the issue. Any guidance or suggestions would be greatly appreciated. Thank you in advance for your assistance!

  1. import React from "react";
  2. export default function Tag({ index, tag, color = "red" }) {
  3. return (
  4. <li
  5. key={index}
  6. className={`inline-flex items-center rounded-full px-3 py-2 text-xs font-bold uppercase bg-${color}-200 text-${color}-700`}
  7. >
  8. <a href={`/?=${tag.text.replace(/\s/g, "_").toLowerCase()}`}>
  9. {tag.text}
  10. </a>
  11. </li>
  12. );
  13. }```
  14. </details>
  15. # 答案1
  16. **得分**: 2
  17. 根据[文档](https://tailwindcss.com/docs/content-configuration#dynamic-class-names):
  18. > Tailwind提取类名的最重要影响是它只会在源文件中作为_完整不间断字符串_存在的类名。
  19. >
  20. > 如果您使用字符串插值或连接部分类名在一起,Tailwind将无法找到它们,因此不会生成相应的CSS:
  21. >
  22. > **不要动态构建类名**
  23. >
  24. > ```vue
  25. > <div class="text-{{ error ? 'red' : 'green' }}-600"></div>
  26. > ```
  27. >
  28. > 在上面的示例中,字符串`text-red-600`和`text-green-600`不存在,因此Tailwind不会生成这些类。
  29. > 相反,确保您使用的任何类名都完整存在:
  30. >
  31. > **始终使用完整的类名**
  32. >
  33. > ```vue
  34. > <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
  35. > ```
  36. 您可以:
  37. - 将整个类放在传递给 `className` 的变量中,如下所示:
  38. ```jsx
  39. export default function Tag({ index, tag, color = "bg-red-200 text-red-700" }) {
  40. return (
  41. <li
  42. key={index}
  43. className={`… ${color}`}
  44. >
  • color 创建一个字典以映射到Tailwind类名,如下所示:

    1. export default function Tag({ index, tag, color = "red" }) {
    2. const DICTIONARY = {
    3. red: 'bg-red-200 text-red-700',
    4. // …
    5. };
    6. // …
    7. return (
    8. <li
    9. key={index}
    10. className={`… ${DICTIONARY[color]}`}
    11. >
  • 如果theme可以转换为有效的CSS颜色值(或者您可以从Tailwind获取颜色),可以使用 style 属性实现真正的动态颜色,如下所示:

    1. export default function Tag({ index, tag, color = "red" }) {
    2. const styles = {
    3. // 从`color`变量转换
    4. };
    5. // …
    6. return (
    7. <li
    8. key={index}
    9. className="…"
    10. style={style}
    11. >
  • 如果您有一组已知的颜色,可以使用safelist这些类,示例如下:

    1. module.exports = {
    2. safelist: [
    3. { pattern: /^text-(red|green|blue)-700$/ },
    4. { pattern: /^bg-(red|green|blue)-200$/ },
    5. // …
    6. ],
    7. // …
    8. };
英文:

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:

  • Have the entire class in the variable you pass to className like

    1. export default function Tag({ index, tag, color = &quot;bg-red-200 text-red-700&quot; }) {
    2. return (
    3. &lt;li
    4. key={index}
    5. className={`… ${color}`}
    6. &gt;
  • Have a dictionary for color to Tailwind class names:

    1. export default function Tag({ index, tag, color = &quot;red&quot; }) {
    2. const DICTIONARY = {
    3. red: &#39;bg-red-200 text-red-700&#39;,
    4. // …
    5. };
    6. // …
    7. return (
    8. &lt;li
    9. key={index}
    10. className={`… ${DICTIONARY[color]}`}
    11. &gt;
  • Use the style attribute for truly dynamic colors, if theme can be converted to a valid CSS color value (or you could get the color from Tailwind):

    1. export default function Tag({ index, tag, color = &quot;red&quot; }) {
    2. const styles = {
    3. // Convert from `color` variable
    4. };
    5. // …
    6. return (
    7. &lt;li
    8. key={index}
    9. className=&quot;&quot;
    10. style={style}
    11. &gt;
  • safelist the classes, if you have a limited number of known colors:

    1. module.exports = {
    2. safelist: [
    3. { pattern: /^text-(red|green|blue)-700$/ },
    4. { pattern: /^bg-(red|green|blue)-200$/ },
    5. // …
    6. ],
    7. // …
    8. ];

huangapple
  • 本文由 发表于 2023年5月29日 02:34:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76353036.html
匿名

发表评论

匿名网友

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

确定