Tailwind 自定义颜色默认不起作用

Question

我有干净的 nuxt.js 项目，以 Nuxt/Tailwind 作为样式。

通过下面的配置，我应该能够在 div 或 postcss 中使用 @applytext-testred和text-testred-dark. 但是，仅text-testred-dark适用于 ，而不适用于默认值text-testred。

也text-testred-DEFAULT有效，所以它解释它是错误的，因为根据文档，它“DEFAULT”将被忽略并将被用作类的默认后缀。

nuxt.config.js

tailwindcss: {
  configPath: '~/tailwind.config.js',
  cssPath: '~/assets/css/tailwind.css'
}

tailwind.config.js

module.exports = {
  theme: {
    fontFamily:{
      sans: ["'GT Walsheim Pro'"],
      serif: ["'GT Walsheim Pro'"],
      mono: ["'GT Walsheim Pro'"],
      display: ["'GT Walsheim Pro'"],
      body: ["'GT Walsheim Pro'"]
    },
  colors: {
    // Configure your color palette here
    transparent: 'transparent',
    current: 'currentColor',
    testred: {
      lightest: '#efdfa4',
      lighter: '#f1cb8a',
      light: '#f5b575',
      DEFAULT: '#f89f68',
      dark: '#fb8762',
      darker: '#f86e61',
      darkest: '#f15764'
    },
  }
}

顺风.css

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

@layer base {
  body{
    @apply text-testred; //doesn't work
    @apply text-testred-DEFAULT; //works
  }
}

编辑

在 @nuxtjs/tailwindcss 4.0.2 及更高版本中，这可以按预期工作。

Answer 1

我遇到了同样的问题，问题出在tailwindcss 版本上。事实上Nuxt插件仍然使用v1.9.6。

您可以在顺风游乐场尝试一下。

如果切换到 v1.9.6，DEFAULT 将不起作用，然后返回 v2.0.2，它会再次起作用。

因此，解决方案是按照官方文档中的建议升级您的版本：

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9