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

【问题标题】：Tailwind custom colors default not workingTailwind 自定义颜色默认不起作用
【发布时间】：2021-04-24 23:56:11
【问题描述】：

我有一个干净的 nuxt.js 项目，使用 Nuxt/Tailwind 作为样式。

通过下面的配置，我应该能够在 div 或 postcss 中使用这些类，@apply text-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'
    },
  }
}

tailwind.css

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

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

编辑

使用最新版本 (4.0.2) 的 @nuxtjs/tailwindcss 可以按预期工作。

【问题讨论】：

标签： nuxt.js tailwind-css

【解决方案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

【讨论】：