Tailwind没有在配置中选择我的scss定义的颜色

ogsagwnx 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(133)

我的scss里有这个：

$yellow: 248 239 0;
@layer base {
  :root {
    --color-green: 60 255 208;
    --color-gray: 148 148 148;
    --color-yellow: $yellow;
  }
}

这是我的tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        "custom-green": 'rgb(var(--color-green) / <alpha-value>)',
        "custom-gray": 'rgb(var(--color-gray) / <alpha-value>)',
        "custom-yellow": 'rgb(var(--color-yellow) / <alpha-value>)'
      }
    },
  },
  plugins: [],
}

出于某种原因，灰色和绿色的工作很好。然而，如果我像在变量中定义黄色那样定义颜色，出于某种原因，它就不起作用了。会是什么问题呢？

css

来源：https://stackoverflow.com/questions/76230458/tailwind-doesnt-pick-up-my-scss-defined-color-in-the-config

1条答案

按热度按时间

1rhkuytd1#

使用足够现代的Sass版本，您可能会发现--color-yellow CSS自定义属性没有您期望的值，并且正在编译为：

:root {
  --color-yellow: $yellow;
}

考虑在Sass中插值，如下所示：

$yellow: 248 239 0;
@layer base {
  :root {
    --color-yellow: #{$yellow};
  }
}

然后它应该编译成一个三位数的空格分隔的列表：

:root {
  --color-yellow: 248 239 0;
}

赞(0）回复(0）举报 2023-05-19

我来回答

Tailwind没有在配置中选择我的scss定义的颜色

1条答案

相关问题

热门标签

最新问答