我最近在做的一個專案使用了Vite、Vue和Tailwind。

使用自訂顏色一段時間後，我遇到了一些困惑。

在模板中添加和使用自訂顏色不是問題 - 使用 Tailwind 文件使該過程非常清晰

// tailwind.config.js
module.exports = {
    theme: {
        colors: {
          'custom-green': {
              50: '#9bd1b2',
              ...
              700: '#284735'
          },
        }
    }
}

我的問題是在 Vue 模板中使用帶有動態和靜態 css 類別的自訂顏色時。

使用 npm run dev 或 vite 執行專案時，bg-custom-green-50 或 text-custom-green-50 不起作用，從未出現在 css 檔案中。

我的理解是，如果模板中不存在完整的 css 類名，則 tailwind 不會添加它或在 css 文件中生成它。

假設 css 類別：text-custom-green-50 或 bg-custom-green-50 未在專案中的其他任何地方使用

下面的例子將不起作用

下面的例子將會起作用

兩個範例之間的差異是 text-custom-green css 類別新增到範本中，因此 tailwind 會將其新增至產生的 css 檔案。

要克服這個問題，您可以將任何自訂顏色或 tailwind 類別新增至 tailwind.config.js 檔案中的安全清單中。

// tailwind.config.js
module.exports = {
    safelist: [
        'text-custom-green-50',
        'bg-custom-green-50'
    ]
}

即使這些顏色不直接在模板中使用，而是在另一點動態添加，它們也將可用

希望其他人覺得這有幫助。