Tailwindcss-module: Color list in tailwind 2

[Zenthae]

Version

@nuxtjs/tailwindcss: 3.1.0
nuxt: 2.14.6
tailwindcss: 2.0.1

Steps to reproduce

Default behavior

What is Expected?

all colors has to be displayed on _tailwind url

What is actually happening?

some colors aren't displayed by default like orange and teal, their are disabled by default in tailwindcss now, you need to extends the config, so this is happening
https://i.imgur.com/LLk0pAS.png

[Atinux]

@Zenthae can you try with the v3.3.1 version I released yesterday? It should be fixed.

[Zenthae]

updated to v3.3.3 and still got the issue, so unless it broke between v3.3.1 and v3.3.3 it's wasn't fixed ^^

[Atinux]

Could you share your tailwind.config.s please @Zenthae?

[Zenthae]

const colors = require('tailwindcss/colors');

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        orange: colors.orange,
      },
      boxShadow: {
        DEFAULT:
          '0 1px 3px 0 rgba(0, 0, 0, 0.1), 1px 1px 2px 0 rgba(0, 0, 0, 0.50)',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

i added orange because it not added by default

[rogden]

@Atinux Tailwind has a resolveConfig and a flattenColorPalette function that may be helpful in parsing the colors. I use both in my Tailwind Config Viewer project. See https://github.com/rogden/tailwind-config-viewer/blob/master/lib/tailwindConfigUtils.js#L2

[Atinux]

I love your project, I will see if we can integrate it directly to join forces ☺️

[Atinux]

Closing since v3.4.0 is out :fire:

[schneefux]

Still present in 3.4.1

[Zenthae]

@schneefux everything is working well, if you are talking about needing to import the colors, then it's not an issue, it was a choice from tailwind to remove them from the default colors. but you can always add them yourself.

const colors = require('tailwindcss/colors');

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        // Add the colors you want
        orange: colors.orange,
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};