[samuelstancl]

> It lets you move all of those excessive class attributes into your CSS, where it realistically belongs

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.

[fareesh]

Can you help me understand the architecture a bit better? I have some reservations.

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.

[darekkay]

> If you extract components then you require JS

Only for interactive components. You can use PHP or a static site generator and create components with no runtime JS at all.

[fareesh]

Yeah I suppose if you use a server-side framework you can use a templating engine to create partials for your components and have a single source of truth that way. I was curious to know if there was a way to do it with just Vue + some build step and pre-rendering

[darekkay]

Not sure about Vue, but in React the simplest thing you could do is to use ReactDOMServer.renderToStaticMarkup(). You can develop your whole "app" in React and then create a JS-less HTML output. There's also Charge [1], a React static site generator with no client-side JavaScript.

[1] https://github.com/brandonweiss/charge

[arvindamirtaa]

> The right way to use Tailwind is to extract components, for example in Vue.

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.

[samuelstancl]

Sure, you may have to use @apply if you're for example adding Tailwind to an existing project with .css files.

But the right/ideal way to use Tailwind is to use components. That way you get the most dev ex that Tailwind can provide.

[rvense]

I think the three levels all have merit. If you don't end up repeating yourself too much, just add the utility classes directly. If you find yourself repeating a bunch of classes together, maybe you can make a semantic class with @apply. If you're repeating a bunch of HTML (and Javascript) along with the CSS, make a component.

[JxLS-cpgbe0]

    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;

so @mixin in Sass? @apply in CSS? (being replaced with Shadow Parts)