Как использовать произвольные значения (arbitrary values) в Tailwind CSS (например, w-[37px])?

Что такое arbitrary values

Arbitrary values — синтаксис Tailwind, позволяющий задать произвольное CSS-значение прямо в классе, заключив его в квадратные скобки: w-[37px], top-[calc(100%-1rem)], bg-[#1a2b3c]. Tailwind генерирует соответствующий utility-класс на лету во время сборки (v3) или через CSS-движок (v4).

Синтаксис и примеры

<!-- Фиксированная ширина из макета -->
<div class="w-[37px] h-[37px]"></div>

<!-- CSS-функции -->
<div class="top-[calc(100%-1rem)] left-[env(safe-area-inset-left)]"></div>

<!-- Цвет в любом формате -->
<span class="text-[#c28b00] dark:text-[oklch(0.85_0.12_85)]">Gold</span>

<!-- Grid с нестандартными колонками -->
<div class="grid grid-cols-[240px_minmax(0,1fr)_180px] gap-[18px]">
  <aside>Nav</aside>
  <main>Content</main>
  <aside>Panel</aside>
</div>

<!-- Модификатор с arbitrary value -->
<div class="lg:w-[720px] hover:bg-[#f0f4ff]"></div>

Когда использовать

Arbitrary values оправданы в трёх ситуациях:

• Пиксель-перфект из макета — дизайнер задал конкретный размер, не кратный шкале Tailwind (например, w-[37px] для иконки).
• CSS-функции — calc(), clamp(), env(), min(), которые невозможно выразить токеном.
• Одноразовое значение — используется ровно в одном месте и вынесение в тему избыточно.

Если arbitrary value встречается в 3+ местах — заводите CSS-переменную в @theme и используйте utility-класс.

Arbitrary properties

Если нужного CSS-свойства нет в Tailwind, используют arbitrary property: [mask-type:alpha], [content-visibility:auto].

<div class="[content-visibility:auto] [contain-intrinsic-size:0_500px]">
  <!-- Виртуализация через CSS -->
</div>

Подводные камни

• Пробелы в значениях — в arbitrary values пробел разрывает класс; используйте _ вместо пробела: grid-cols-[1fr_2fr], а не grid-cols-[1fr 2fr].
• Bloat при злоупотреблении — каждый уникальный arbitrary value генерирует отдельный CSS-класс; это увеличивает bundle и нарушает принцип токенизации.
• Нечитаемость в diff — w-[37px] не несёт семантики; через месяц непонятно, откуда взялось значение. Добавляйте комментарий или переносите в дизайн-токен.
• Нет IntelliSense для незарегистрированных значений — IDE-плагин не подсказывает arbitrary values, ошибки в синтаксисе легко пропустить.
• Конфликт с JIT-кешем (v3) — при динамическом формировании класса строкой (w-[${size}px]) Tailwind не включит его в output; весь класс должен присутствовать в исходнике целиком.
• Важность пространства имён — text-[16px] задаёт font-size, text-[#aaa] — color; Tailwind определяет CSS-свойство по типу значения, что иногда неочевидно.
• Несовместимость с purge в старых версиях — в Tailwind v2 arbitrary values не поддерживались; при миграции старых проектов нужен апгрейд до v3+.

• Смешивать «arbitrary values» с похожим механизмом без критерия выбора.
• Игнорировать риск: неверно оценить границы применения темы «arbitrary values» и получить хрупкое решение.
• Показывать только синтаксис и не объяснять поведение в runtime или сборке.

• Объясняет одноразовые значения вроде w-[37px] без расширения темы.
• Показывает на примере, как работает: arbitrary value полезен для точной интеграции с дизайном или CSS-функцией, но частое применение вместо токенов разрушает системность интерфейса.
• Называет production-нюанс и граничный случай для темы «arbitrary values».