Question

我正在尝试使用 svelte 制作服务，并且我还使用 smelte 和 tailwindcss 作为 UI。

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

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

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

<块引用>

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

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

Answer 1

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

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

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

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

1 个答案: