Tailwind 4 and Angular and @apply

[lemonCMS]

Let me start with that i love using tailwind 3, we adopted it in our team and using it throughout multiple applications.

Today i was busy looking at how we can move on from Tailwind 3 to version 4. And my conclusion is we cant.

The culpret is @apply. The @apply is not global anymore. But we can still use it if we create a @reference to our tailwind theme stylesheet.

So lets try that.

Because we are using a monorepo with a lot of libraries and over 100 scss files that depant on @apply. i started creating a script to update all those files with the relative path to our tailwind theme css.

So far so good.

I started our application... And the startup time went up from 38 seconds, to 3 minutes and 40 seconds!

Then i read that for each time @reference is used, the whole stylesheet is generated. Please correct me if this is not true.

In case this is true and build times will not improve, we are unable to upgrade our applications.

I know about the creater of tailwind, would never have created @apply again if he would start over, but that does not solve our problem.

We use @apply to keep the html readable and the css readable. We are not looking to have something like this in our html.

.filter-button {
  @apply grid items-center justify-center;
  @apply m-0 h-6 w-full max-w-full px-4 py-0;
  @apply rounded-12 border-2 border-transparent;
  @apply cursor-pointer select-none;
  @apply break-words text-sm font-bold md:text-xs;
}

Another issue are the errors:

These are classes that should be known. But perhaps there is some @reference going wrong, but i have no idea where to start looking.

So the issues we are facing so far:

• Very slow build times
• Random base classes not being regonized. And not able to figure out why
• No reference on were the errors occur
• Having to add a @refrence to all our files (But this can be worked around with by a filewacther and some script)

Right now i have no idea on how to continue from here.