Why is the advice from v1 about extracting components not in v2

[alexjoyner]

I noticed in the documentation for extractive components, v1 gives the advice for building button utility classes as not putting all the tailwind utilities in the custom utility

A better approach is to extract the parts that are the same into a separate class

@layer components {
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }

  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-700;
  }

  .btn-gray {
    @apply bg-gray-400 text-gray-800;
  }
  .btn-gray:hover {
    @apply bg-gray-500;
  }
}

but in v2, the docs don't seem to mention this anymore and now just use this

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-blue {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

Did I miss something, or Is the original advice not recommended anymore? if so, what's the reason?

[adamwathan]

Still totally something you can do, I just tried to shorten that section because it felt like it was becoming too much of an article on how to write CSS and less documentation of Tailwind the framework. I would still recommend breaking up classes like that to be composable over duplicating.

[alexjoyner]

ok, sounds good. Also, this is a little off-topic, but how do you feel about using class prefixes in your app. Would you recommend i use something like aj-btn aj-button-default in my apps? Assuming I don't plan on adding a dependency that would cause a conflict, is it still good practice?