扩展Tailwind中的颜色

Question

请帮帮忙。我正在尝试在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',
             },
          }
        }
      }
    }

Answer 1

你的方法是正确的。我在我的代码中尝试了同样的方法，它工作得很好。我建议使用'npm start‘并在保存此代码后刷新页面。顺风配置文件需要多花一点时间来显示更改。此外，我建议将数字写在没有引号的地方。

Answer 2

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

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

确保className是正确的：

​

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

orr

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

​