Произвольные значения и свойства
Шкала Tailwind покрывает большинство задач, но иногда нужно точное значение из макета: ширина ровно 350 пикселей или фирменный цвет #1da1f2. Для этого значение пишут в квадратных скобках прямо в классе — это произвольное значение (arbitrary value).
Значение в скобках
После префикса утилиты ставят скобки с любым допустимым CSS-значением:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="w-[350px] rounded-[10px] bg-[#1da1f2] p-[18px] text-white">
Ширина ровно 350px
</div>Tailwind создал классы на лету: width: 350px, border-radius: 10px, нужный цвет фона и отступ. Так же работают top-[117px], text-[22px], grid-cols-[240px_1fr].
Пробелы и функции
В имени класса не может быть пробелов, поэтому вместо них ставят подчёркивание. Внутри скобок работают функции CSS:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-[120px_1fr] gap-3">
<img src="/media/photo-200x200.jpg" alt="Наушники" class="rounded-lg">
<div class="h-[calc(100%-1rem)] rounded-lg bg-gray-100 p-3">Описание товара</div>
</div>Первая колонка шириной 120 пикселей, вторая занимает остальное место. Внутри calc() пробелы вокруг минуса добавляются автоматически.
CSS-переменные
Если значение лежит в CSS-переменной, её пишут в круглых скобках без var():
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div style="--brand: #16a34a">
<button class="rounded-lg bg-(--brand) px-4 py-2 text-white">Купить</button>
</div>bg-(--brand) превращается в background-color: var(--brand). Так цвет кнопки можно менять из JavaScript или из CMS. В Tailwind 3 то же самое записывали как bg-[--brand].
Произвольное свойство
Если для CSS-свойства нет утилиты вообще, его пишут целиком в скобках: [свойство:значение]:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<p class="[writing-mode:vertical-rl] bg-amber-100 p-2">Новинка</p>Текст повёрнут вертикально. Варианты работают и здесь: hover:[writing-mode:horizontal-tb].
Произвольный вариант
Селектор тоже можно написать в скобках, где & — сам элемент: [&>li]:py-2 даёт отступ всем прямым потомкам li. Для частых случаев есть готовый вариант *: — он применяет утилиту ко всем прямым детям.
Частая ошибка
Заменять скобками всю шкалу:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="p-[15px] text-[17px] mt-[13px]">Наушники</div>Работает, но страница теряет единый ритм: размеры «почти как в шкале» плохо стыкуются с остальными. Скобки — для исключений из макета. Если значение повторяется, добавьте его в тему через @theme — это следующий урок.