tailwind1-10  Exercise 3: Layers, @apply and @reference
========================================================

(1) Reproduce the problem. input.css:

  @import "tailwindcss";
  .btn { padding: 4px; }

  <button class="btn p-8">…</button>

  padding-top:  4px        (p-8 has no effect)
  .btn alone:   4px

(2) The fix, with no change to the markup:

  @import "tailwindcss";
  @layer components {
    .btn { padding: 4px; }
  }

  .btn + p-8:   32px       (the utility wins now)
  .btn alone:   4px        (the component default still applies)

(3) @apply in a separate file. component.css, with no import at all:

  .title { @apply text-2xl font-bold; }

  Error: Cannot apply unknown utility class `text-2xl`. Are you using CSS modules or similar and missing `@reference`?
         https://tailwindcss.com/docs/functions-and-directives#reference-directive

  Fix A:  @reference "tailwindcss";   at the top      output 672 bytes   (only .title, with fallbacks like var(--text-2xl, 1.5rem))
  Fix B:  @import "tailwindcss";      at the top      output 5,305 bytes (the whole theme and base layers again)

In a real project the first line would be @reference "../app.css"; (the path to your main stylesheet) so your custom theme is known too.

WHY THIS WORKS AS AN ANSWER
---------------------------
Tailwind's utilities live in a cascade layer, and in CSS any rule that is not in a layer beats every rule that is, regardless of selector specificity. So the plain .btn rule outranked p-8, and
the only reason it looked like Tailwind was broken is that the two rules were in different places in the cascade. Putting .btn in @layer components places it below the utilities layer, so
p-8 overrides it while the component default still applies on its own; both facts were measured. The @apply error happens because a file that does not import Tailwind has no theme to look
text-2xl up in. @reference gives it the definitions without emitting them (672 bytes of output), whereas re-importing duplicates Tailwind's base and theme CSS in every component file (5,305 bytes).