如何在顺风 css 中使用颜色或 css/scss 中的材质 ui

Posted 2023-03-06

【中文标题】如何在顺风 css 中使用颜色或 css/scss 中的材质 ui

【英文标题】：How to use colors in tailwind css or material ui in css/scss

【发布时间】：2021-10-08 15:33:32

【问题描述】：

我为顺风 css 和 material ui colors 找到了这个 tailwind color。这些颜色很好地命名为 100 - 900 和 A100 - 400，就像字体一样。我认为直接在 scss 或 css 文件上使用它们会很好。我该怎么做/有没有可以使用的导入文件？

【问题讨论】：

如果它们是 css 变量，您可以在 scss/css 文件中轻松访问它们。遗憾的是，默认情况下并非如此，但this answer 提供了实现它的方法。

【参考方案1】：

我建议使用LESS with TailWindCSS 来受益于Mixin。

使用手写笔：

// index.styl
$codeBackground = theme('colors.pink.800')

a
 @apply text-yellow-600 !important
 background $codeBackground !important

输出：

【讨论】：

谢谢。我有几个问题。你必须在 index.styl 中导入一些东西才能使主题（'colors.pink.800'）工作吗？并且只需 npm install for less 就可以在我的常规 html/scss 中使用它？

关于手写笔我发现它在没有顺风底座的情况下在我的测试中工作；顺风组件；顺风公用事业；最后我还没有测试过。见[少] (tailwindcss.com/docs/using-with-preprocessors#less)

我现在没有时间尝试它是否有效..但感谢您的努力回答

不要忘记检查答案作为解决方案。

【参考方案2】：

首先在下拉列表中选择rgb -

然后单击您想要的任何颜色。它的 rgb 代码将被复制。然后在您的 css 文件中的任何位置使用它，而无需任何麻烦前 - 颜色：rgb(146, 64, 14)，背景颜色：rgb(146, 64, 14) 等。

【讨论】：

答案有帮助吗？

如果您不 ping 任何人，他们不会收到通知，但您（在您的回答中）不会收到通知。

你是什么意思？？

【参考方案3】：

我不确定你想做什么。您可以参考标记中的颜色类，例如..

bg-blue-400 或 text-red-800

【讨论】：

我正在尝试在常规 css 颜色/背景颜色属性中使用这些颜色，这比编写和引用十六进制代码要容易得多...

啊，我知道了，我认为您需要为此使用 PostCSS

你会怎么做？