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

【问题标题】：How can I use tailwindcss colors in smelte components?如何在 smelte 组件中使用 tailwindcss 颜色？
【发布时间】：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

标签： svelte tailwind-css

【解决方案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 文件，我们可以提供更详细的解决方案。

【讨论】：