Migration from v3 to v4: Handling border-opacity Issue

[ocherkashchenko]

Old code:

@layer components {
  .divider-t {
    @apply border-t border-grey-70 border-opacity-50;
    box-shadow: inset 0 1px 0 0 #FFF;
  }
}

Converted to:

@utility divider-t {
  @apply border-t border-grey-70 border-opacity-50;
  box-shadow: inset 0 1px 0 0 #fff;
}

Problem:
When we try to start the project, the following error appears:
Error: Cannot apply unknown utility class: border-opacity-50

It seems that border-opacity-* is not recognized in the new @Utility layer or context.

[wongjn]

Indeed, border-opacity-* classes have been removed. Try

@utility divider-t {
  border-top: 1px;
  border-color: --alpha(var(--color-grey-70) / 50%);
  box-shadow: inset 0 1px 0 0 #fff;
}

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097

[christianmarzian]

You can try this:
border-t border-grey-70/50;
where /50 is the opacity

[paulolopest]

Genius

[rozsazoltan]

https://tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilities