Can't use all colors

[warudin]

I am just getting started with Tailwind. I integrated it in my gulpfile and this seems to work as intended. When I save my scss file, the css file is updated correctly.

But when I use various colors that are available in this overview, the Gulp process crashes with a notice that the class does not exist:
The 'bg-zinc-600' class does not exist, but 'bg-pink-600' does. If you're sure that 'bg-zinc-600' exists, make sure that any '@import' statements are being properly processed before Tailwind CSS sees your CSS, as '@apply' can only be used for classes in the same CSS tree.

I am using Tailwind version 3.0.23

I can and can't use the following colors:

Available	Unavailable
gray	slate
red	zinc
yellow	neutral
green	stone
blue	orange
indigo	amber
purple	yellow
pink	lime
	emerald
	teal
	cyan
	sky
	violet
	fuchsia
	rose

To be complete, this is (part of) my gulpfile.js:

var styles = function (fileName) {
  if (!fileName) {
    fileName = 'dev/css/styles.scss';
  }
    gulp.src(fileName)
    .pipe(sourcemaps.init()) // initialize sourcemaps first
    .pipe(sass()) // compile SCSS to CSS
      .pipe(postcss([
      tailwindcss('./tailwind.config.js'),
      autoprefixer("> 0.5%", "last 4 versions", "ie 11"),
      // postcssPresetEnv(),
      // postcssInlineSVG()
    ])) // PostCSS plugins
    .pipe(csso({
      restructure: true,
      sourceMap: true,
    }))
    .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
    .pipe(dest('assets/css')) // put final CSS in dist folder

    gulp.src('assets/css/*.css');

    return console.log('compiled: ' + fileName);
  }

And this is my tailwind.config.js

module.exports = {
  // mode: 'jit', // Just-In-Time Compiler
  purge: {
    enabled: true,
    content: ['*.php', './template-parts/**/*.php', './assets/css/*.css']
  },
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

And this is my .scss file

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

h1 {
   @apply
   py-2
   px-4
   gap-0.5
   text-white
   font-semibold
   rounded-lg
   shadow-md
   hover:bg-blue-700
   focus:outline-none
   focus:ring-2
   focus:ring-blue-400
   focus:ring-opacity-75
   bg-zinc-600;
}

[adamwathan]

Hey! This sounds like you are on v2 instead of v3. Can you share an actual project that reproduces?

[warudin]

Admittedly I am not an NPM expert.
I installed Tailwind CSS as a global package because I hate to have a node_modules folder in every project.
I am therefore assuming that the global version is being used.
The repository folder contains no Tailwind CSS installation (or even a node_modules folder).
I know this might not be the correct way of working when doing so in teams, but when working only on my own system this is always working well enough.

If I ask Terminal to list all global packages, I see this entry in the list:
[email protected]

[warudin]

OK, after some more fiddling around with NPM I am happy to tell you that you were totally right.
I installed tailwindcss with the -D flag and now I am able to use the other colors.

Thanks for getting me on the right track.

[liquidia]

I have similar issue checked my node folder and dependencies version in package json .. also terminal .. it shows latest version 3.1.7 but still cant use v3 classes. Like bg-slate etc

[qwloh]

How would you recommend we go about this? I don't assume I have to create a dummy object just to apply all color classes I expect to be computed? Thanks

--

Edit: I found two possible solutions, both of which might be suitable depending on one's use case.

Solution 1: So the docs actually covers this. We should Not be writing dynamic classes like so

className={`text-${ error ? 'red' : 'green' }-600}`} // discouraged

Rather, we should write the class names in full like this instead

className={{ error ? 'text-red-600' : 'text-green-600' }} // ok

In doing so, text-red-600 and text-green-600 will not be purged when tailwind builds.

Solution 2. If the above is not possible, apparently there is also a safelist #6557 (comment) that we can use in tailwind.config.js to force tailwind not to purge certain color classes (and any class really) by adding patterns that matches those classes. E.g.

 safelist: [
    {
      pattern: /orange/,
    },
  ],

[DoktorDaveJoos]

Well, you answered yourself in Edit 2 ;)

[qwloh]

I did :D Edited my reply to make it more obvious for others who come across this thread

[melyux]

I'm not computing class names and I still can't access the v3 colors even in v3.

[rutikwankhade]

Recently had this issue, ended up adding this in tailwind.config which adds all the color classes to safelist

 safelist: [
    {
      pattern: /(bg|text|border|ring)-(orange|green|blue|purple|pink|fuchsia|lime|amber|sky|violet|indigo|yellow)-(50|100|200|300|400|500|600|700|800|900)/,
    },
  ],