Поддерживает ли инструмент стандартные статические классы Tailwind?

Нет, инструмент сфокусирован исключительно на разборе произвольных значений в квадратных скобках и не загружает полную тему Tailwind.

Как обрабатываются пробелы в шаблонах grid или calc?

Используйте нижнее подчеркивание вместо пробелов, например grid-cols-[1fr_2fr] или [scroll-snap-type:y_mandatory], парсер автоматически заменит их на пробелы в CSS.

Что такое подсказки типов данных в скобках?

Это явные указания типа, например text-[length:14px] или text-[color:var(--brand)], которые помогают парсеру отличить размер шрифта от цвета текста.

Можно ли использовать CSS-переменные внутри произвольных значений?

Да, вы можете передавать переменные, например bg-[var(--main-bg)] или text-[color:var(--brand)].

Требуется ли подключение к интернету для генерации CSS?

Нет, парсер работает локально в браузере и мгновенно преобразует синтаксис скобок в CSS-код.

Elysia Tools

Навигация

Design

Песочница произвольных значений Tailwind

Вставьте классы Tailwind с произвольными значениями (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) и изучите сгенерированный CSS с живым визуальным предпросмотром, распознаванием подсказок типа данных и пояснением каждого преобразования. Полезно для отладки calc(), CSS-переменных и разовых значений вне шкалы токенов.

Детали

С чем помогает этот инструмент

Песочница произвольных значений Tailwind для frontend-инженеров и авторов дизайн-систем:

Вставьте один или несколько классов Tailwind с синтаксисом скобок (через пробел или перенос строки).
Парсер распознаёт три формы: утилита + произвольное значение (w-[137px]), произвольное свойство ([mask-type:luminance]) и произвольные варианты-селекторы.
Подсказки типов вроде text-[length:14px] или text-[color:var(--brand)] распознаются и помогают разрешить коллизии перегруженных префиксов (text -> color против font-size, bg -> image против color).
Для каждого класса выдаётся сгенерированное CSS-правило (развёрнутое или сжатое), живой визуальный предпросмотр и краткое пояснение.
Статические классы без скобок перечисляются, но не раскрываются без полного движка Tailwind — инструмент сфокусирован на «запасном выходе» произвольных значений.

Офлайн-парсер: рантайм Tailwind не запускается, поэтому статические утилиты и токены темы намеренно вне области действия.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

2 примеров

Размеры, calc и градиентный фон

Несколько утилит с произвольными значениями: математика длин, цвет через CSS-переменную и градиентный фон.

<div class="tav-wrap">…5 classes parsed, each with a live swatch/tile preview and an expanded CSS rule such as .demo { width: 137px; }…</div>

Произвольное свойство и шаблон grid

Демонстрирует сокращение [свойство:значение] и многополосный шаблон grid с подчёркиванием вместо пробела.

<div class="tav-wrap">…arbitrary properties mask-type and scroll-snap-type are emitted directly, grid templates collapse underscores into spaces, output is single-line…</div>

Ввод

Заполните нужные поля и запустите инструмент.

5 параметров

СодержимоеВставьте или введите основные значения.1

Классы Tailwind (по одному в строке или через пробел)textareaОбязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.2

Стиль вывода CSSselectНеобязательноТема предпросмотраselectНеобязательно

ПереключателиВключайте или отключайте дополнительные режимы.2

Показать живой предпросмотрcheckboxНеобязательноВключено, если отмеченоПоказать объяснение CSScheckboxНеобязательноВключено, если отмечено

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Песочница произвольных значений Tailwind

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

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

Как это работает

Сценарии использования

Примеры

1. Отладка сложных размеров и градиентов

2. Настройка кастомной сетки Grid и CSS-свойств

FAQ

Примеры Tailwind CSS

MP3 Аудио Образцы Без Авторских Прав

SVG Примеры

Примеры Обработки Изображений Android Java

Анализатор изображений VP8

Генератор Водопадного Графика

Генератор отчета по аудиту доступности

Разделитель CSV

Инструменты конвертации регистра, кодировки и нормализации текста

Инструменты Text

Инструменты анализа текста, читаемости и проверки содержания

Инструменты маскирования, подсветки и форматирования текста