Песочница Tailwind
Пишите HTML с утилитами Tailwind CSS v4 и компилируйте его прямо в браузере.
Что такое Песочница Tailwind?
Это бесплатный редактор внутри браузера: вы пишете HTML с утилитами Tailwind CSS v4 и видите скомпилированный результат в живом предпросмотре. Официальный браузерный компилятор Tailwind v4 встроен прямо в страницу.
Мой код куда-то загружается?
Нет. Компиляция полностью выполняется в вашем браузере на локально упакованной копии движка Tailwind. Ваш HTML не покидает страницу, а черновики хранятся только в localStorage браузера.
Какая версия Tailwind используется?
Используется Tailwind CSS v4, актуальная старшая версия, через официальный компилятор @tailwindcss/browser. Работают все базовые утилиты, варианты и тема по умолчанию, включая произвольные значения в квадратных скобках.
Как работает живой предпросмотр?
Ваш HTML внедряется в изолированный iframe вместе с компилятором. После каждой правки утилиты перекомпилируются с паузой в 500 миллисекунд, поэтому ввод остаётся плавным, а предпросмотр — актуальным.
Как проверить тёмные стили?
Включите переключатель «Тёмный предпросмотр». Он добавляет класс "dark" к документу предпросмотра, а компилятор привязывает вариант dark: к этому классу — утилиты вроде dark:bg-slate-900 срабатывают мгновенно.
Можно ли увидеть CSS, который генерирует Tailwind?
Да. Панель «Скомпилированный CSS» под редакторами показывает точную таблицу стилей, созданную компилятором для вашей разметки, а кнопка «Копировать CSS» копирует её в буфер обмена.
Что содержит скачанный HTML?
Кнопка «Скачать HTML» создаёт автономный файл: ваша разметка плюс скомпилированный CSS, встроенный в head. Страница корректно отображается офлайн — без CDN-ссылок и без интернета.
Есть ли стартовые шаблоны?
Да. В выборе шаблонов есть hero-секция, адаптивная сетка карточек и таблица цен из трёх тарифов — все на актуальных утилитах v4, плюс минимальный пустой шаблон.
Как использовать Песочница Tailwind
Эта песочница запускает официальный браузерный компилятор Tailwind CSS v4 полностью на вашей машине. Слева вы набираете простой HTML с утилитарными классами, компилятор генерирует соответствующий CSS внутри изолированного iframe предпросмотра, а панель внизу показывает точную созданную таблицу стилей. Ничего не загружается: компилятор, ваша разметка и черновики остаются в браузере.
- Выберите отправную точку в селекторе «Шаблон»: Hero, сетка карточек, таблица цен или пустой; ваш текст также автоматически восстанавливается между визитами.
- Редактируйте HTML в левом редакторе. Tab вставляет два пробела, а предпросмотр перекомпилируется примерно через 500 мс после остановки ввода.
- Переключайте «Мягкий перенос» для управления переносами строк и селектор размера шрифта, чтобы задать размер текста редактора.
- Включите «Тёмный предпросмотр», чтобы добавить класс "dark" к документу предпросмотра; утилиты вроде dark:bg-slate-900 реагируют мгновенно.
- Читайте сгенерированные правила в панели «Скомпилированный CSS» и копируйте их кнопкой «Копировать CSS», когда нужно.
- Используйте «Копировать HTML» для сырой разметки или «Скачать HTML», чтобы получить автономный файл со встроенным скомпилированным CSS, готовый к открытию офлайн.
В скачивании настоящие стили появляются минимум после одной компиляции, так что дайте предпросмотру отрисоваться разок перед экспортом. Чтобы уменьшить сгенерированный CSS, удалите из шаблона неиспользуемые элементы — панель всегда точно отражает потребности вашей текущей разметки.
Похожие инструменты
- Песочница кода Онлайн-песочница HTML, CSS и JavaScript с живым предпросмотром, редактором с номерами строк и перехваченной консолью. Мгновенно тестируйте фрагменты и скачивайте результат в один HTML-файл — полностью в браузере.
- Генератор CSS Grid Бесплатный визуальный генератор CSS Grid с живым предпросмотром. Интерактивно создавайте адаптивные макеты и экспортируйте готовый CSS-код.
- Калькулятор Chmod Бесплатный онлайн-калькулятор chmod для визуализации и вычисления прав доступа Linux с помощью флажков. Мгновенное преобразование между числовой (755, 644) и символической нотацией (rwxr-xr-x). Поддержка специальных прав: setuid, setgid, sticky bit.
- Таблица ASCII Полная справочная таблица кодировки ASCII с десятичными, шестнадцатеричными, восьмеричными, двоичными кодами, HTML-сущностями и описаниями символов. Мгновенный поиск и фильтрация.
- Тестер HTTP-запросов Тестируйте REST API прямо в браузере. Отправляйте запросы GET, POST, PUT, DELETE с пользовательскими заголовками, телом и параметрами. Мгновенно просматривайте статус, заголовки и JSON-тело ответа.
- Генератор .htaccess Генерация правил .htaccess Apache для перенаправлений, перезаписи, заголовков безопасности, кэширования и др.
- Генератор Robots.txt Бесплатный онлайн-генератор robots.txt. Создавайте и настраивайте файлы robots.txt для управления сканированием поисковых систем, контроля доступа краулеров и оптимизации SEO вашего сайта.
- Генератор Sitemap Бесплатный онлайн генератор XML sitemap. Добавляйте URL, настраивайте приоритеты и частоты, создавайте SEO-sitemap мгновенно.