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

Question

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

通过下面的配置，我应该能够在 div 或带有 @apply text-testred 和 text-testred-dark 的 postcss 中使用这些 classes。但是，只有 text-testred-dark 有效，而不是 text-testred.

的默认值

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

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'
    },
  }
}

tailwind.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.

您可以在 tailwind playground 中试用。

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

所以解决方案是按照 official docs 上的建议升级您的版本：

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

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

Tailwind custom colors default not working

nuxt.js

tailwind-css