Tailwind custom colors default not working

Question

I have clean nuxt.js project with Nuxt/Tailwind as styling.

With the configuration below i should be able to use these classes on a div or in postcss with @apply text-testred and text-testred-dark. However, only text-testred-dark works and not the default value with text-testred.

Also text-testred-DEFAULT works, so it's interpreting it wrong, since according to the docs it "DEFAULT" will be ignored and will be used as the default suffix of class.

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

EDIT

With latest version (4.0.2) of @nuxtjs/tailwindcss this works as expected.

Answer 1

I had the same issue, and the problem was the tailwindcss version. In fact the Nuxt plugin still uses v1.9.6.

You can try it out here in the tailwind playground.

If you switch to v1.9.6 the DEFAULT doesn't work, and go back to v2.0.2 and it works again.

So the solution would be to upgrade your version like it is suggested on the official docs :

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