Support for recursive `@apply`

[rolandleth]

All of these work with tailwindcss, but with @tailwindcss/jit they don't, no matter the order of bg-white and some-class:

@layer components {
    .some-class {
        @apply bg-red-500;
    }

    .some-other-class {
        @apply bg-white some-class;
    }
}

@layer components {
    .some-class {
        @apply bg-red-500;
    }

    .some-other-class {
        @apply bg-white;
        @apply some-class;
    }
}
/* this one even removes everything from `.some-other-class` */

@layer components {
    .some-class {
        background-color: red;
    }

    .some-other-class {
        @apply bg-white some-class;
    }
}

It looks like --tw variables aren't overwritten; in these examples, background-color is always rgba(255, 255, 255, var(--tw-bg-opacity)).

This is the only I saw it works, but it's weird and the only reason it's working is that the explicit background-color replaces the one set via @apply (final value is red, so it doesn't go through TW):

@layer components {
    .some-class {
        background-color: red;
    }

    .some-other-class {
        @apply bg-white;
        @apply some-class; /* reversing them doesn't work */
    }
}

[adamwathan]

Hey! Yeah sorry this is a known limitation and should be mentioned in the README — currently we don't support recursive @apply, so you can't use @apply in classA then @apply classA in classB.

I'll update the title for this issue and keep it open until we have implemented it 👍🏻

[skworden]

Try removing the layer decorator. Ours was also not working until we removed the layer decorators and all of our custom CSS started working again.

@layer base { body { @apply bg-gray-200; } }

Is now

body { @apply bg-gray-200; }

[rolandleth]

If I don't declare it within a @layer, then the custom class won't get recognized:

The some-class class does not exist. If some-class is a custom class, make sure it is defined within a @layer directive.

[skworden]

I thought the layer directive was to place the custom classes in the proper place for CSS ordering as well as making the classes being able to be purged at build. So custom classes should show with and without the layer detractive in regular TW, however the CSS inheritance might be off. I'm just basing this off the docs and you are probably more familiar with this since I only started using TW a couple days ago.

So, I don't how many of these rules still apply with JIT enabled. I do know that TW w/JIT is picking up my custom classes and it only did once I removed the layer directives.

here is my setup - maybe I'm doing something different but I think my setup is pretty standard.

I switched from tailwind to @tailwindcss/jit in the post css config and added purge in tw config like in the readme of this repo.

In my main entry point (I use next so _app.tsx) import tailwind then my custom css file.

import "tailwindcss/tailwind.css"
import 'styles/main.scss';

[adamwathan]

Should have pretty good basic support for this in v0.1.6 now 👍🏻

[rolandleth]

Awesome, working great! 👍🏻

[kwesterfeld2]

I agree this is now working. I wanted to leave a note that at first I felt like this was not working, but rearranging my components to use my master "main.css" vs. my "component css" fixed the issue.

I am using vuejs, so my component looked like this:

<style scoped lang="postcss">
@include "../../_components.css";

.some-class {
  @apply some-component;
}
</style>

This didn't work with these fixes, however changing my include to "../../main.css", which includes tailwind and my "components.css" , where my components are defined within a @layer directive, did work.