Question

我有一个干净的 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 可以正常工作。

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 自定义颜色默认不起作用

1 个答案: