Having trouble understanding @utility override based on theme

[LarsWesselius]

Hi!

I'm looking for a suggested approach for a situation where I only want the light variant of my theme (specified by using data-theme attrib) to have a border on the sidebar (with class .sidebar).

I have a custom variant for each of themes specified. Here's the full CSS

@import "tailwindcss";

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

/*@custom-variant dark (&:where(.dark, .dark *));*/
@custom-variant light (&:where([data-theme=light], [data-theme=light] *));
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@custom-variant colorful (&:where([data-theme=colorful], [data-theme=colorful] *));
@custom-variant purple (&:where([data-theme=purple], [data-theme=purple] *));

@theme {
  ...
}

@theme inline {
  --color-primary-800: var(--primary-800);
  ...
}

/*
@utility sidebar {
  @variant light {
    @apply border-r border-gray-200;
  }
}*/

/*
@layer components {
  @variant light {
    .sidebar {
      @apply border-r border-gray-200;
    }
  }
}*/

@layer base {  
  [data-theme='light'] {
    --primary-800: var(--color-gray-50);
    
    .sidebar {
      @apply border-r border-gray-200;
    }
  }

  [data-theme='dark'] {
    --primary-800: var(--color-gray-900);
    ...
  }

  [data-theme='purple'] { 
    --primary-800: oklch(0.1532 0.0847 293.81);
    ...
  }
}

I have a couple of questions;

1. Is this the suggested way of doing theming in the first place?
2. See the commented out sections, and notice the .sidebar @apply under the data-theme='light' section. 3 different ways to do the same thing, as they all independently work. I'd like to have all the theme specific customizations in the same place so I'm leaning to the current code. I'm wondering; what's the difference between these 3 methods?
3. For the current CSS, I have to use @layer base, @layer theme doesn't apply the border-r and border-gray-200 to the .sidebar. What am I missing in understand regarding the layers?

Thanks so much!

[wongjn]

Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

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

Instead, consider setting the Tailwind class names directly in the template like:

<div class="… light:border-r light:border-gray-200">