@apply vs new component - for solving duplication?

[jenstornell]

I've seen two approaches to solve the duplication problem. @apply and the component (using for example Vue) approach.

Which to use depends on the situation I guess. You who have built many things with Tailwind may have experienced where to draw that line on which approach to use when?

• Headings
• Buttons

...are things that I will use more than ones on a site. Any thoughts?

[adamwathan]

We try to explain some best practices around this in the docs in case you haven't seen:

https://tailwindcss.com/docs/extracting-components

I would recommend never using @apply for anything that involves more than a single HTML element (buttons and inputs are reasonable but most else is better as a template partial), and even then if you are working in a framework like React or Vue where everything is a component already, you might just never use @apply for anything at all.

[jenstornell]

To never use @apply sounds like a simple and good approach. I don't use Vue for my current project, but a similar custom made CMS in PHP.

My component looks like below:

<?php
$name = isset($name) ? $name  : 'h1';
$base_classes = "text-5xl fw-900 font-heading text-gray-800 pb-2 tracking-tighter";
$classes = isset($classes) ? ' ' . $classes : '';

echo sprintf(
  '<%s class="%s">%s</%s>',
  $name,
  $base_classes . $classes,
  $value,
  $name
);

My function call:

<?= component('heading-primary', [
  'value' => 'Hello world',
  'classes' => 'bg-red-500',
  'name' => 'h1'
]); ?>

or

<?= component('heading-primary', [
  'value' => 'No need for additional classes',
]); ?>

Just leaving it here for future PHP users to see as a possible inspiration.