Discussion on: [Update] Using Svelte with Tailwindcss - A better approach

[Andrew Mao]

This doesn't seem to work for adding custom utilities: tailwindcss.com/docs/adding-new-ut...

If I try to add a new utility class, e.g.:

  @layer utilities {
    .body-12-caps {
      @apply font-sans font-bold not-italic uppercase;
      font-size: 0.75rem /* 12px */;
      line-height: 1.125rem /* 18px */;
      letter-spacing: 0.1em;
    }
  }

and try to use it with @apply, then I see something like the following:

`@apply` cannot be used with `.body-12-caps` because `.body-12-caps` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.body-12-caps` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.