Tailwind Style Keywords

In site and theme stylesheets, use Tailwind for shared design conventions: named responsive breakpoint variants and established spacing, sizing, and typography utilities when their meanings and values match the intended design. Use @apply to compose those utilities behind semantic selectors. Use plain CSS for custom values, CSS custom-property references, complex selectors, animations, and declarations that are clearer or more precise in native CSS. Do not force a declaration into an arbitrary-value utility or create an @utility merely to replace a clear CSS declaration; define custom utilities only for genuinely reusable behavior. Tailwind and plain CSS may coexist in the same rule. Preserve intended rendering, keep appearance in stylesheets, and follow the centralized breakpoint and theme-variable policies.

Philosophy

Tailwind provides shared design conventions; plain CSS remains appropriate when it expresses the intended rule more clearly. Do not convert declarations merely to maximize utility usage.

Correct

@variant md {
    .dialog {
        @apply p-8;
        min-height: 17rem;
    }
}
.detail {
    color: var(--textPrimary);
    font-size: 1.375rem;
}

Fix

Use named Tailwind breakpoint variants and matching established utilities for shared design conventions. Keep custom or clearer declarations in plain CSS without changing their rendered meaning or values.