Nested @screen causing error with postcss

[Exelord]

Hi,
I noticed an issue while using nested @screen in class:

.secondaryLinks {
  @screen sm {
    @apply w-auto flex-grow-0;
    @apply flex gap-4;
  }
}

is producing :

./src/components/navbar/styles.module.css ((webpack)/css-loader/cjs.js??ref--5-oneOf-2-1!(webpack)/postcss-loader/cjs.js??ref--5-oneOf-2-2!./src/components/navbar/styles.module.css)
TypeError: Cannot read property 'split' of undefined

moving the @screen out of class works again.

[adamwathan]

Right now we expect ~valid CSS as the input to Tailwind, and CSS doesn't actually support nesting so we haven't done anything to handle it (it's a huge increase in scope to take that on ourselves, not out of the question forever but not a 15 minute fix).

I would have suggested running postcss-nested before Tailwind in your PostCSS config file, but there's a bug with postcss-nested that prevents this code from expanding properly:

.foo {
  @screen md {
    @apply bg-black;
  }
}

So I'm afraid the best recommendation right now is to not nested your @screen rules and just write things long form:

@screen sm {
  .secondaryLinks {
    @apply w-auto flex-grow-0;
    @apply flex gap-4;
  }
}

@screen md {
  .secondaryLinks {
    @apply w-full;
    @apply gap-6;
  }
}

No plans to support this currently but I will leave this open as a reminder to myself to explicitly throw a helpful error until we can one day do something better.

[RomkaLTU]

I'm not sure this is actually @screen issue, I had the same error just right now, and I removed some @apply directives (rewritten to simple CSS), and everything compiling again. Here is example:

Before:

.container {
    @apply px-4 mx-auto;
    max-width: 1170px;

    @screen xl {
        @apply px-0;
    }
}

After:

.container {
    max-width: 1170px;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0 auto;

    @screen xl {
        padding-left: 0;
        padding-right: 0;
    }
}

My postcss config:

.postCss('resources/css/app.pcss', 'public/css', [
        require('postcss-import'),
        require('@tailwindcss/jit'),
        require('postcss-nested'),
        require('autoprefixer'),
    ]);

[adamwathan]

@RomkaLTU The issue is the combination of @screen and @apply. @apply looks at the rule it's inside of to find out what class name it should use in the CSS it generates. It sees @screen instead of a class name, so things blow up because we don't have any special support for nesting in Tailwind itself.

[thecrypticace]

I'm gonna look at adding some error messages around this today

[CreateSean]

I'm not sure if it's in the docs, but adding info about it into the docs would also be helpful