# Песочница произвольных значений Tailwind Вставьте классы Tailwind с произвольными значениями (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) и изучите сгенерированный CSS с живым визуальным предпросмотром, распознаванием подсказок типа данных и пояснением каждого преобразования. Полезно для отладки calc(), CSS-переменных и разовых значений вне шкалы токенов. > Каноническая страница: https://elysiatools.com/ru/tools/tailwind-arbitrary-value-playground - **Категория:** Design - **Ключевые слова:** tailwind, произвольное значение, песочница tailwind, w-\[..\], tailwind css, утилитарный класс, генератор css, calc(), синтаксис скобок tailwind, frontend, адаптивный дизайн, css-переменная, токен дизайна ## Обзор Песочница произвольных значений Tailwind для frontend-инженеров и авторов дизайн-систем: 1. Вставьте один или несколько классов Tailwind с синтаксисом скобок (через пробел или перенос строки). 2. Парсер распознаёт три формы: утилита + произвольное значение (w-[137px]), произвольное свойство ([mask-type:luminance]) и произвольные варианты-селекторы. 3. Подсказки типов вроде text-[length:14px] или text-[color:var(--brand)] распознаются и помогают разрешить коллизии перегруженных префиксов (text -> color против font-size, bg -> image против color). 4. Для каждого класса выдаётся сгенерированное CSS-правило (развёрнутое или сжатое), живой визуальный предпросмотр и краткое пояснение. 5. Статические классы без скобок перечисляются, но не раскрываются без полного движка Tailwind — инструмент сфокусирован на «запасном выходе» произвольных значений. Офлайн-парсер: рантайм Tailwind не запускается, поэтому статические утилиты и токены темы намеренно вне области действия. ## Входные данные - **Классы Tailwind (по одному в строке или через пробел)** (textarea): w-\[137px\] h-\[calc(100vh-4rem)\] text-\[#bada55\] bg-\[url(/hero.png)\] grid-cols-\[1fr_2fr_1fr\] \[mask-type:luminance\] \[&:hover\]:text-\[#ff0000\] - **Стиль вывода CSS** (select) - **Тема предпросмотра** (select) - **Показать живой предпросмотр** (checkbox) - **Показать объяснение CSS** (checkbox) ## Когда использовать - При отладке сложных CSS-вычислений внутри классов Tailwind, таких как h-\[calc(100vh-4rem)\]. - Для проверки правильности компиляции произвольных свойств вроде \[mask-type:luminance\] или нестандартных сеток grid-cols-\[1fr_2fr\]. - При необходимости быстро сгенерировать чистый CSS из классов Tailwind без развертывания локального окружения или запуска сборщика. ## Как это работает - Введите один или несколько классов Tailwind с использованием квадратных скобок в текстовое поле. - Выберите формат вывода CSS (развернутый или сжатый) и тему для визуального предпросмотра. - Парсер автоматически распознает типы данных, сгенерирует эквивалентные CSS-правила и отобразит интерактивный результат с пояснениями. ## Сценарии использования - Быстрое прототипирование сложных сеток grid с произвольными пропорциями колонок и строк. - Проверка корректности синтаксиса при использовании CSS-переменных и функций calc() в адаптивной верстке. - Изолированное тестирование кастомных CSS-свойств, не входящих в стандартную конфигурацию темы Tailwind. ## Частые вопросы ### Поддерживает ли инструмент стандартные статические классы 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-код. ## Связанные инструменты - [Анализатор изображений VP8](https://elysiatools.com/ru/tools/vp8-image-analyzer): Анализирует WebP/VP8 через Sharp, создает grayscale displacement map и рендерит 3D-рельеф в Three.js - [Генератор Водопадного Графика](https://elysiatools.com/ru/tools/waterfall-chart-generator): Создание водопадных графиков для визуализации накопительных изменений с различением положительных/отрицательных значений и отображением промежуточных итогов - [Генератор отчета по аудиту доступности](https://elysiatools.com/ru/tools/accessibility-audit-report-generator): Проверяет HTML или URL на распространенные проблемы WCAG и экспортирует структурированный PDF-отчет - [Разделитель CSV](https://elysiatools.com/ru/tools/csv-splitter): Разделить CSV контент по указанному количеству строк. Идеально подходит для обработки больших наборов данных, разделения данных для анализа, пакетной обработки и управления ограничениями размера файла. Возможности: - Разделение CSV по количеству строк - Поддержка нескольких форматов вывода - Сохранение заголовка в каждом разделе - Гибкие опции формата вывода - Поддержка больших наборов данных - Быстрая и эффективная обработка Общие случаи использования: - Разделение больших CSV файлов для обработки - Разделение данных для параллельной обработки - Создание управляемых блоков данных - Экспорт данных в разных форматах - Подготовка данных для пакетных операций - Управление ограничениями размера файла - [Инспектор файлов шрифтов (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/ru/tools/font-file-inspector): Загрузите шрифт TTF, OTF, WOFF или WOFF2 (WOFF2 автоматически распаковывается) и изучите все метаданные: семейство/подсемейство/дизайнер/копирайт/версия, число глифов, unitsPerEm, насыщенность и ширину, угол наклона, флаги стиля и bounding box; тепловую карту покрытия по блокам Юникода; SVG-предпросмотр глифов (свой текст, автосбор для иконочных шрифтов); лигатуры liga и возможности OpenType; оси fvar и именованные экземпляры вариативных шрифтов. - [Экстрактор зачеркиваний из PDF-ревью](https://elysiatools.com/ru/tools/pdf-strikethrough-review-extractor): Находит зачеркнутый текст в PDF-документах ревью и формирует отчет для договоров и редакций - [Генератор Радарных Диаграмм](https://elysiatools.com/ru/tools/radar-chart-generator): Генерировать настраиваемые радарные диаграммы из данных, идеально подходит для многомерного сравнения и анализа - [Генератор Паучьей Диаграммы](https://elysiatools.com/ru/tools/spider-chart-generator): Генерировать упрощенные паучьи диаграммы (радар) для сравнения и анализа многомерных данных ## Примеры - [Примеры Tailwind CSS](https://elysiatools.com/ru/samples/tailwind-css): Примеры Tailwind CSS - CSS-фреймворк с утилитарно-первым подходом, адаптивным дизайном, компонентами и пользовательской конфигурацией - [MP3 Аудио Образцы Без Авторских Прав](https://elysiatools.com/ru/samples/mp3-samples): Коллекция аудио образцов без авторских прав для тестирования и разработки, включая звуки природы, медитативную музыку и фоновое аудио - [SVG Примеры](https://elysiatools.com/ru/samples/svg-samples): Примеры масштабируемой векторной графики (SVG) демонстрирующие различные возможности и техники SVG - [Примеры Обработки Изображений Android Java](https://elysiatools.com/ru/samples/android-image-processing-java): Примеры обработки изображений Android Java включая чтение/сохранение, масштабирование и преобразование формата ## Связанные материалы - [Инструменты конвертации регистра, кодировки и нормализации текста](https://elysiatools.com/ru/hubs/text-convert): Сравните в одном хабе конвертацию регистра, ширины символов, кодировок, работу с quoted-printable и встроенную нормализацию текста. - [Инструменты Text](https://elysiatools.com/ru/hubs/text-utility): Изучите 33 инструментов text для сценариев utility и быстро сравните близкие утилиты. - [Инструменты анализа текста, читаемости и проверки содержания](https://elysiatools.com/ru/hubs/text-analyze): Сравните в одном хабе текстовую статистику, определение языка, оценку читаемости, анализ тональности, модерацию и анализ шаблонов. - [Инструменты маскирования, подсветки и форматирования текста](https://elysiatools.com/ru/hubs/text-format): Сравните в одном хабе инструменты маскирования чувствительного текста, поиска PII, нормализации телефонов, подсветки фраз, центрирования текста и форматирования diff.