Prefer Tailwind Utilities

Try to use Tailwind utilities in CSS files instead of writing pure CSS.

Philosophy

Usually this causes lower lines of code and fewer bytes per file.

Correct

.links {
    @apply flex flex-wrap gap-4;
}
.icon {
    @apply size-5 fill-current;
}

Incorrect

.links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.icon {
    fill: currentColor;
    height: 1.25rem;
    width: 1.25rem;
}

Exceptions

• The enforcer checks only a conservative set of direct equivalents. It skips theme-dependent values, important declarations, ambiguous same-block overrides, blocks containing directives, and definition or keyframe contexts.

Fix

Use @apply with equivalent Tailwind utilities where practical, preserving existing behavior and semantic theme variables.