@apply z-0 not found by gulp-postcss

[kresnasatya]

Hi, when I use @apply z-0 in my class (css file), I got error message from gulp-postcss that z-0 not found as below:

`@apply` cannot be used with `.z-0` because `.z-0` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.z-0` 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.

This is configuration of gulp-postcss in gulpfile.js:

const gulp = require('gulp');
const postcss = require('gulp-postcss');

gulp.task('css', async function() {
  gulp.src('./src/css/style.css')
    .pipe(postcss())
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest('./dist/css/'));
});

By default, postcss() will read configuration in postcss.config.js. Here's the configuration:

const cssnano = require('cssnano')({
  preset: 'default'
});

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './src/**/*.html',
    './src/*.html',
    './src/js/**/*.js',
  ],
  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : [],
    ...process.env.NODE_ENV === 'production'
    ? [cssnano]
    : []
  ]
}

For temporary solution, instead of implement @apply z-0 in my css file, I just put z-0 in inline html tag like this:

<div class="dialog__mask z-0"></div>

Is that anyone face the same problem?

[adamwathan]

Can you create a project that reproduces the issue?

[kresnasatya]

Hi @adamwathan, here's the repo that reproduces the issue: https://github.com/satyakresna/accessible-dialog

[adamwathan]

Submitted a PR that fixes it for you:

https://github.com/satyakresna/accessible-dialog/pull/1

The problem is you were overriding all of the z-index values, you need to use extend 👍

[kresnasatya]

Thanks a lot Adam. 🙏

[kresnasatya]

Hi @adamwathan, just feedback.

In tailwindcss docs about customizing z-index value section: https://tailwindcss.com/docs/z-index/#customizing it doesn't give me (in my opinion) clear explanation about how toextend the value and I would prefer if it follows like customizing width value section: https://tailwindcss.com/docs/width/#customizing.

I think that's why I got the problem z-0 doesn't work. Next time, I will try to read the docs more carefully.

Thank you.