How to properly manage duplication (@apply is evil)

[frenzymind]

Hello. So, using @apply is not recommended. Lets assume I want to prefer this rule. I read docs Using custom CSS. Then, for example I have this tw code:

<dl class="divide-border-color divide-y text-xs">
      <div class="flex justify-between px-5 py-2.5">
            <dt>...</dt>
            <dd class="text-secondary font-medium">
              <span [class]="rowData.cashClasses"> ... </span>
            </dd>
      </div>
</dl>

I can see utility generated style, how much of them I should copy to my css? Can I just copy entire style from hint to my css and be happy?
For example divide-y gives me:

.divide-y {
    :where(& > :not(:last-child)) {
        --tw-divide-y-reverse: 0;
        border-bottom-style: var(--tw-border-style);
        border-top-style: var(--tw-border-style);
        border-top-width: calc(1px * var(--tw-divide-y-reverse));
        border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
}

then in my css:

.dl {   
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));

    >div {
      padding-inline: calc(var(--spacing) * 5) /* 1.25rem = 20px */;
      padding-block: calc(var(--spacing) * 2.5) /* 0.625rem = 10px */;
     }

    &:where(& > :not(:last-child)) {
      border-color: var(--color-border-color);

      --tw-divide-y-reverse: 0;

      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
}

1. Should I copy --tw-divide-y-reverse: 0; ?
2. Should I copy line-height: var(--tw-leading, var(--text-xs--line-height)); from text size utility? If I not, then I lose height in my dl ?
3. Should I copy padding calculation, or just can use padding-inline: 1.25rem ? Or use --spacing(5) ?

I hope you understand my confusion and what I want to ask. How to understand what to copy? What mind set should be? thanks!

[wongjn]

The Tailwind paradigm is to keep the class names and don't copy anything to CSS. If you need to reuse this, consider converting it to a component in your templating language.

[rozsazoltan]

Related:

• Why stop using @apply

[KaloudasDev]

Hello! You're asking the right questions about CSS architecture. The core issue is understanding when to use utilities vs. custom CSS. Here's a practical approach:

Recommended Approach: Component Extraction
Instead of copying utility internals, extract reusable components:

<!-- Instead of duplicating complex utility combinations -->
<dl class="divided-list">
  <div class="list-row">
    <dt>...</dt>
    <dd class="value">...</dd>
  </div>
</dl>

CSS Implementation:

/* Use Tailwind's design tokens for consistency */
.divided-list {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  
  /* Use semantic CSS custom properties */
  > :not(:last-child) {
    border-bottom: 1px solid var(--color-border-color);
  }
}

.list-row {
  display: flex;
  justify-content: space-between;
  padding-inline: var(--spacing-5);
  padding-block: var(--spacing-2-5);
}

.value {
  color: var(--color-secondary);
  font-weight: var(--font-weight-medium);
}

When to Copy Utility Internals:

• Don't copy internal Tailwind variables like --tw-divide-y-reverse
• Do use Tailwind's design tokens (--spacing-5, --color-border-color)
• Don't copy complex calculations unless necessary
• Do create semantic CSS that expresses intent

Better Mindset:

1. Utilities for one-off styles - Keep them in HTML
2. Components for repeated patterns - Extract to CSS with semantic class names
3. Design tokens - Use Tailwind's CSS variables for consistency
4. Progressive enhancement - Start with utilities, extract when duplicated 3+ times

Example with Design Tokens:

/* Leverage Tailwind's system without @apply */
.data-list {
  font-size: var(--text-xs);
  line-height: var(--leading-5);
  
  .row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2-5) var(--spacing-5);
    
    &:not(:last-child) {
      border-bottom: 1px solid var(--color-gray-200);
    }
  }
  
  .value {
    color: var(--color-gray-600);
    font-weight: 500;
  }
}

The key is using Tailwind's design system as a foundation while creating semantic, maintainable CSS for your specific components.