Playground Tailwind
Escreva HTML com utilitários do Tailwind CSS v4 e compile ao vivo no navegador.
O que é o Playground Tailwind?
É um editor gratuito dentro do navegador em que você escreve HTML com classes utilitárias do Tailwind CSS v4 e vê o resultado compilado numa prévia ao vivo. O compilador oficial do Tailwind v4 para navegador já vem embutido na página.
Meu código é enviado para algum lugar?
Não. A compilação acontece inteiramente no seu navegador com uma cópia local do motor do Tailwind. Seu HTML nunca sai da página e os rascunhos ficam apenas no localStorage do navegador.
Qual versão do Tailwind ele usa?
Usa o Tailwind CSS v4, a versão principal mais recente, por meio do compilador oficial @tailwindcss/browser. Todas as utilidades essenciais, variantes e o tema padrão funcionam, inclusive valores arbitrários entre colchetes.
Como funciona a prévia ao vivo?
Seu HTML é injetado num iframe isolado junto com o compilador. Após cada edição, as utilidades são recompiladas após uma pausa de 500 milissegundos, então a digitação fica fluida e a prévia sempre atualizada.
Como testo os estilos do modo escuro?
Ative a chave «Prévia escura». Ela adiciona a classe "dark" ao documento de prévia e o compilador mapeia a variante dark: para essa classe, então utilidades como dark:bg-slate-900 respondem na hora.
Posso ver o CSS que o Tailwind gera?
Sim. O painel «CSS compilado» abaixo dos editores mostra exatamente a folha de estilos produzida pelo compilador para a sua marcação, e o botão «Copiar CSS» a copia para a área de transferência.
O que contém o HTML baixado?
O botão Baixar HTML gera um arquivo autônomo com a sua marcação mais o CSS compilado embutido no head, então a página renderiza corretamente offline, sem link de CDN e sem internet.
Há modelos iniciais?
Sim. O seletor de modelos oferece uma seção hero, uma grade de cartões responsiva e uma tabela de preços de três níveis, todos com utilidades atuais da v4, além de um ponto de partida mínimo em branco.
Como usar Playground Tailwind
Este playground executa inteiramente na sua máquina o compilador navegador oficial do Tailwind CSS v4. Você digita HTML simples com classes utilitárias à esquerda, o compilador gera o CSS correspondente dentro de um iframe de pré-visualização isolado, e um painel abaixo mostra a folha de estilos exata produzida. Nada é enviado: o compilador, sua marcação e seus rascunhos ficam todos no navegador.
- Escolha um ponto de partida no seletor de Modelo: Hero, Grade de cartões, Tabela de preços ou Em branco; seu texto também é restaurado automaticamente entre visitas.
- Edite o HTML no editor à esquerda. Pressionar Tab insere dois espaços, e a pré-visualização recompila cerca de 500 ms depois que você para de digitar.
- Ative Quebra suave para controlar a quebra de linha, e o seletor de tamanho de fonte para definir o tamanho do texto do editor.
- Ative Pré-visualização escura para adicionar a classe "dark" ao documento de pré-visualização; utilitários como dark:bg-slate-900 respondem instantaneamente.
- Leia as regras geradas no painel CSS compilado e copie-as com Copiar CSS quando precisar.
- Use Copiar HTML para a marcação bruta, ou Baixar HTML para obter um arquivo autônomo com o CSS compilado embutido, pronto para abrir offline.
O download só tem estilos reais depois de pelo menos uma compilação, então deixe a pré-visualização renderizar uma vez antes de exportar. Para reduzir o CSS gerado, apague do modelo os elementos não usados — o painel sempre reflete exatamente o que sua marcação atual precisa.
Ferramentas relacionadas
- Laboratório de Código Playground online de HTML, CSS e JavaScript com pré-visualização ao vivo, editor com números de linha e console capturado. Teste trechos na hora e baixe o resultado como um arquivo HTML - tudo no navegador.
- Gerador CSS Grid Gerador visual gratuito de CSS Grid com pré-visualização ao vivo. Crie layouts de grade responsivos interativamente e exporte código CSS pronto para produção.
- Calculadora Chmod Calculadora chmod online gratuita para visualizar e calcular permissões de arquivo Linux com caixas de seleção. Converta instantaneamente entre notação numérica (755, 644) e simbólica (rwxr-xr-x). Suporta permissões especiais como setuid, setgid, sticky bit.
- Tabela ASCII Referência completa de codificação de caracteres ASCII com códigos decimais, hexadecimais, octais, binários, entidades HTML e descrições. Pesquisa e filtro instantâneos.
- Testador de Requisições HTTP Teste APIs REST diretamente no seu navegador. Envie requisições GET, POST, PUT, DELETE com headers, body e parâmetros personalizados. Veja status, headers e corpo JSON instantaneamente.
- Gerador .htaccess Gere regras .htaccess do Apache para redirecionamentos, reescritas, cabeçalhos de segurança, cache e mais.
- Gerador de Robots.txt Gerador gratuito de robots.txt online. Crie e personalize arquivos robots.txt para controlar a rastreamento de motores de busca, gerenciar acesso de rastreadores e otimizar o SEO do seu site.
- Gerador de Sitemap Gerador gratuito de sitemap XML online. Adicione URLs, defina prioridades e frequências, crie sitemaps SEO instantaneamente.