在 Tailwind 中扩展颜色答案

【问题标题】：Extending colors in Tailwind在 Tailwind 中扩展颜色
【发布时间】：2021-06-12 04:49:39
【问题描述】：

请帮忙。我正在尝试在 Tailwind 中使用自定义颜色，并且已经安装...配置并让 Tailwind 在我的项目中工作。然后我将自定义颜色添加到 Tailwind 中，并从我的 package.json 文件中运行“npm run build:css”，它运行成功，但我无法让颜色正常工作。我尝试在颜色而不是值周围加上引号，但它仍然不起作用。这是我的代码。

    module.exports = {
      theme: {
        extend: {
          colors: {
            limegreen: {
              '50':  '#FBFCF7',
              '100': '#F8FBE1',
              '200': '#EEF69E',
              '300': '#DCEC53',
              '400': '#A8D619',
              '500': '#65DC21',
              '600': '#429E04',
              '700': '#357C06',
              '800': '#295B09',
              '900': '#20450A',
             },
          }
        }
      }
    }

【问题讨论】：

这似乎是正确的。你能举例说明你是如何使用这种颜色的吗？

标签： tailwind-css

【解决方案1】：

你的语法似乎是正确的，你也可以这样写：

colors: {
        secondary: "#FF0000",
        silver: "#F3F3F3",
        gray: {
          dark: "#1f2d3d",
          darkest: "#3c4858",
          DEFAULT: "#777",
          light: "#e0e6ed",
          lightest: "#f9fafc",
          naive: "#333333",
          naiveHover: "#7F7F7F",
        },
      },

确保类名正确：

<div className="bg-limegreen-50"></div>

orr

<div className="text-limegreen-50"></div>

【讨论】：

【解决方案2】：

你的方法是正确的。我在我的代码中尝试了同样的方法，它运行良好。我建议在保存此代码后使用“npm start”并刷新页面。顺风配置文件需要更多时间来显示更改。此外，我建议在写数字时不要加引号。

【讨论】：