如何使用 Tailwind 向 NuxtUI 添加自定义颜色

Question

我正在开发一个 Nuxt 项目，并尝试向 NuxtUI 组件添加自定义颜色。我已经设法让它部分工作，但这个过程感觉有点笨拙。如果可能的话，我正在寻找一种更直接的方法，将自定义颜色直接包含在 NuxtUI 调色板中。

我已采取的步骤

在 tailwind.config.ts 中定义我的颜色：

theme: {
    extend: {
        colors: {
            variantred: {
                50: '#fff0f0',
                100: '#ffdddd',
                200: '#ffc0c0',
                300: '#ff9494',
                400: '#ff5757',
                500: '#ff2323',
                600: '#ff1a1a',
                700: '#d70000',
                800: '#b10303',
                900: '#920a0a',
                950: '#500000',
            },

在 nuxt.config.ts 中：

export default defineNuxtConfig({
    ui: {
        colors: {
            alternativered: 'variantred',
        }
    }

使用添加的颜色到组件：

<template>
  <UButton color="variantred">Red Button</UButton>
</template>

问题

当我尝试使用

"alternativered"

作为

UButton

的颜色时，基色未按预期应用。但是，将其添加到

nuxt.config.ts

中可以使阴影正常工作，例如悬停时按钮会改变颜色。

有人有此问题的经验或知道更好的方法将自定义颜色与 NuxtUI 组件中的完整功能集成吗？

文档洞察

我在 NuxtUI 主题文档中发现，他们建议使用

safelistColors

来包含自定义颜色。然而，如果不应用

safelistColors

，我上面所做的配置似乎只能工作。

环境详情：

• Nuxt：3.13.2

• NuxtUI：2.18.7

• 顺风：2014年4月3日

感谢您的任何见解！

Answer 1

似乎推荐的最佳实践是，在

tailwind.config.ts

中添加颜色及其阴影后，将颜色值添加到

nuxt.config.ts

中的 ui.safelistColors 中。然后，您可以将颜色名称直接应用于组件。 nuxt.config.ts：

export default defineNuxtConfig({
    ui: {
        safelistColors: ['variantred']
    }

在组件文件中：

<template>
  <UButton color="variantred">Button</UButton>
</template>