在 Tailwind 中扩展颜色

Posted 2023-03-07

【中文标题】在 Tailwind 中扩展颜色

【英文标题】：Extending colors in 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',
             ,
          
        
      
    

【问题讨论】：

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

【参考方案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”并刷新页面。顺风配置文件需要更多时间来显示更改。 此外，我建议在写数字时不要加引号。