If you extract components then you require JS (low lighthouse score, lots of JS processing on slow devices, likely SEO problems) or SSR to render the page and then serve it (high TTFB)
Ideally you would have some kind of build step that can pre-process all the vue components and spit out pre-rendered HTML for all pages but preserve the interactive parts of the component scripts.
Only for interactive components. You can use PHP or a static site generator and create components with no runtime JS at all.
That's not the full story. Using @apply is the only option if you're not using a component based JS framework like Vue or React.
@aply works everywhere. The current documentation highlights this difference; showing both component extraction and using @apply as a failback when you want to go old school.
But the right/ideal way to use Tailwind is to use components. That way you get the most dev ex that Tailwind can provide.
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
No. Adam said multiple times that he basically added the feature to make onboarding people smoother.
The right way to use Tailwind is to extract components, for example in Vue.
That way you have the markup, behavior, and styling in self-contained in a single file, that can be used anywhere, without leaking any internal implementation details.