Как пользоваться: Генератор произвольных значений Tailwind
- Вставьте одно или несколько CSS-объявлений (подойдёт и целый блок правила).
- При необходимости добавьте вариант, например
md:илиhover:. - Скопируйте все классы сразу или отдельные из таблицы.
Что такое произвольные значения Tailwind?
Когда дизайну нужно значение, которого нет в вашей теме Tailwind, его можно записать прямо в квадратных скобках: w-[372px], bg-[#1da1f2], grid-cols-[1fr_200px_auto]. Для CSS-свойств, под которые у Tailwind нет утилиты вовсе, используйте произвольное свойство: [clip-path:polygon(0_0,100%_0,100%_85%,0_100%)].
Правила синтаксиса, которые обрабатывает этот инструмент
- Без пробелов: имена классов не могут содержать пробелы, поэтому пробелы заменяются подчёркиваниями —
1fr 200px auto→1fr_200px_auto. Пробелы после запятых просто удаляются. - Подсказки типа: некоторые утилиты неоднозначны из-за CSS-переменных (
text-[var(--x)]— это цвет или размер?). Инструмент добавляет подсказки вродеtext-[color:var(--brand)]илиtext-[length:var(--size)]. - !important: превращается в префикс
!. - Неподдерживаемые свойства, например
mask-imageилиclip-path, выводятся как произвольные свойства.
Когда не стоит использовать произвольные значения
Произвольные значения идеально подходят для единичных случаев. Если одно и то же значение повторяется во многих местах, лучше добавить его в тему: для цветов используйте инструменты CSS Variables to Tailwind или Tailwind Color Generator, чтобы код оставался согласованным и читаемым.
Также ищут как: css в tailwind, grid-cols-[].
Инструменты, которые хорошо сочетаются с Генератор произвольных значений Tailwind
- Генератор глассморфизма — Создайте карточку с эффектом матового стекла с помощью ползунков и скопируйте кроссбраузерный CSS — с префиксом -webkit-backdrop-filter и запасным вариантом для старых браузеров.
- Калькулятор clamp() — Введите минимальный и максимальный размер и диапазон ширины экрана.
- CSS Форматер — Превратите минифицированную таблицу стилей в читаемый CSS: одно свойство на строке и правильно вложенные блоки @media.
- Генератор CSS-анимаций — Создавайте CSS-анимации на таймлайне ключевых кадров.
Часто задаваемые вопросы
Как писать пробелы в произвольных значениях Tailwind?
Используйте подчёркивания:
grid-cols-[1fr_auto]. Tailwind преобразует их обратно в пробелы. Чтобы использовать настоящее подчёркивание, экранируйте его как \_.Что такое произвольное свойство?
Это класс вида
[property:value] для CSS-свойств, у которых нет утилиты Tailwind, например [mask-type:luminance].Работает ли это с Tailwind v3 и v4?
Да, синтаксис скобок одинаковый в обеих версиях. Tailwind v4 также принимает сокращение
(--var) для CSS-переменных.Почему внутри класса есть «color:»?
Это подсказка типа. Она сообщает Tailwind, что значение
var() является цветом, и поэтому генерируется color, а не font-size.Можно ли установить Генератор произвольных значений Tailwind как веб-приложение и пользоваться им офлайн?
Да. Генератор произвольных значений Tailwind — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.