[v4] @apply previous custom classes error

[nam-co]

Just a remember that this works on v3.x but as of v4 alpha 10 it stills doesn't work, it gets the error: "Cannot apply unknown utility class: btn"

.btn { @apply py-2 px-3; } .btn-red { @apply btn bg-red-600; }

Appreciate any guidance

[nam-co]

Thank you @RobinMalfait

[nam-co]

Hope it can be included in alpha.~~11~~ ~~12~~ ~~14~~ ~~15~~ ~~16~~ ~~17~~ 18

[nam-co]

Hi @RobinMalfait hope everything is well, got any ideas when will this be merge/accepted? Thank you

[RobinMalfait]

Hi!

I'm not 100% sure yet if we will add backwards compatibility support for this as-is, or if we are going to only apply it as part of a codemod and/or upgrade guide.

That said, in v3 this only worked if the .btn was inside of an @layer utilities. E.g.:

@layer utilities {
  .btn {
    @apply py-2 px-3;
  }

  .btn-red {
    @apply btn bg-red-600;
  }
}

When it's inside of @layer utilities we registered it as a utility in the system.

In v4, we don't want to hijack the @layer anymore (we added @layer before it was a native feature of CSS itself)

Instead, we introduced @utility, which you can already use in the latest alpha version. E.g.: https://play.tailwindcss.com/MqcFhxbuMV?file=css

The upgrade guide for this is relative easy:

1. Drop the . — .btn becomes btn
2. If you have have a selector, use nesting instead

@layer utilities {
  .btn:hover {
    color: red;
  }
}

Becomes

@utility btn {
  &:hover {
    color: red;
  }
}

If you want to use @apply inside of these newly defined @utility at-rules, then you will have to wait for the next alpha release because we just merged support for this (https://github.com/tailwindlabs/tailwindcss/pull/14144).

Relevant PRs:

• @utility support — https://github.com/tailwindlabs/tailwindcss/pull/14044
• @apply support inside @utility — https://github.com/tailwindlabs/tailwindcss/pull/14144

[nam-co]

Hi @RobinMalfait thanks for the update and your time, I think this custom classes also worked in the @layer components:

@layer components { .text-test { color: black;... } . text-magic { @apply text-test;... } } Robin this is a cool cool magical feature of V3, I bet it made a lot of people try and fell in love with TW it just seem simpler the v3 way