Issue with tailwind purge and postcss-nested

[tillkruss]

Prior to the Tailwind purge option this CSS worked and wasn't purged:

.dropdown {
    @apply relative;

    &.is-expanded {
        .dropdown-menu {
            @apply block;
        }
    }
}

Now I need to wrap all &.classname in start ignore blocks.

The JavaScript for that class like like:

el.classList.add('is-expanded');

This works by the way:

.dropdown {
    @apply relative;
}

.dropdown.is-expanded {
    .dropdown-menu {
        @apply block;
    }
}

[adamwathan]

Can you post a project that reproduces? My gut is to say you should make sure the nesting plugin runs before Tailwind which I bet fixes it.

[tillkruss]

That worked, kinda. Might be worth updating the docs.

[
    require('postcss-import'),
    require('postcss-nested'),
    require('tailwindcss'),
    require('autoprefixer'),
]

However, now the @screen sm directives don't work any longer.

What's the best practice here, not use nesting? Use postcss-nesting?

[adamwathan]

Use the bubble option to make sure @screen directives are bubbled:

https://github.com/postcss/postcss-nested#bubble

[tillkruss]

This isn't working with either bubble or unwrap and with postcss-nested before or after tailwind.

Either media queries don't do @apply, or nested selectors are ignored.

I ended up not using @apply directives inside @screen as a workaround.

mix.postCss('resources/css/app.css', 'public/assets/css', [
    require('postcss-import'),
    require('postcss-nested')({
        bubble: ['screen'],
    }),
    require('tailwindcss'),
    require('autoprefixer'),
]);

[adamwathan]

Yeah there's another issue about this now too, bleh. Have to fix a bug in postcss-nested unfortunately.

[adamwathan]

Here's the open issue that is the same underlying issue:

#2192

[tillkruss]

Perfect. I'll follow that 👍🏻

[ollyollyollyltd]

For anyone here from Google, note that the Tailwind docs now recommend using tailwindcss/nesting:

To add support for nested declarations, we recommend our bundled tailwindcss/nesting plugin, which is a PostCSS plugin that wraps postcss-nested or postcss-nesting and acts as a compatibility layer to make sure your nesting plugin of choice properly understands Tailwind’s custom syntax like @apply and @screen.