如何在 smelte 组件中使用 tailwindcss 颜色？

Posted 2023-03-07

【中文标题】如何在 smelte 组件中使用 tailwindcss 颜色？

【英文标题】：How can I use tailwindcss colors in smelte components?

【发布时间】：2021-09-10 13:50:26

【问题描述】：

我正在尝试使用 svelte 提供服务，并且我还在 UI 中使用 smelte 和 tailwindcss。

我放置按钮组件并设置这样的颜色。

...
<Button color="text-gray-700">button</Button>
...

但未显示颜色“text-gray-700”。 在文档中，

颜色变体，接受 Tailwind 配置中描述的任何主要颜色

所以看来我需要写来配置我想使用的所有颜色，但我不想写它们。 那么，有没有办法在smelte组件中使用类似“text-gray-700”这样的tailwindcss颜色。

【问题讨论】：

您好！不熟悉 svelte 但text-gray-700 为 CSS 颜色而不是颜色本身生成属性。颜色名称为gray-700。尝试写color="gray-700" 而不是text-gray-700

【参考方案1】：

我们不知道您的配置设置在哪里使用有问题，但您需要检查在您的tailwind.config.js 文件中覆盖或定义为您的tailwind setup 的任何设置。

其他常见的解决方案就是试试这个，

// your main css file like "index.css"

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities 
  ...
  // add any your custom utilities
  text-gray-700 
    --tw-text-opacity: 1;
    color: rgba(55, 65, 81, var(--tw-text-opacity));
  ,
  text-gray-800 
    --tw-text-opacity: 1;
    color: rgba(55, 65, 81, var(--tw-text-opacity));
  ,
  ...

如果您展示您使用的 index.css 或 tailwind.config.js 文件，我们可以提供更详细的解决方案。