CODEWITHSUNDEEP
nuxt.jstailwind-css
Felix Eklöf
Felix Eklöf

Reputation: 3740

Tailwind custom colors default not working

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

In version 4.0.2 and above of @nuxtjs/tailwindcss this works as expected.

Upvotes: 7

Views: 11789

Answers (1)

Benjamin Fourgeaud
Benjamin Fourgeaud

Reputation: 864

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

Upvotes: 4

Related Questions