JSX + Tailwind
Um componente com as classes de Tailwind que reproduzem os estilos calculados.
Exportar Pro
Copie qualquer bloco de um site como JSX + Tailwind
O Smart Design Inspector converte o bloco de um site que escolher num componente JSX com classes de Tailwind, ou em HTML e CSS, pronto para colar no seu projeto.
Função Pro em acesso antecipado grátis enquanto não chegar o lançamento da Pro (data por definir)
Bloco · tucliente.example
Reservas
Mesa para esta noite
- De terça a domingo, 13-23 h
- Rua Maior 12
<div className="rounded-lg border border-gray-200 p-8">
<p className="text-xs uppercase tracking-widest">Reservas</p>
<p className="mt-2 text-2xl font-semibold">Mesa para esta noite</p>
<ul className="mt-4 space-y-2 text-sm">…</ul>
<a className="mt-6 block bg-blue-600 px-4 py-2 text-white">
Reservar
</a>
</div><div class="card">…</div>
.card {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 32px;
}
.card .title { font-size: 24px; font-weight: 600; }01
Como funciona
3 passos- 01
Abra o site e escolha Copiar bloco.
- 02
Passe o cursor e clique no bloco que quer: um hero, um cartão de preço, um rodapé.
- 03 Pro
Escolha o formato, JSX + Tailwind ou HTML/CSS, e é copiado para a área de transferência.
02
O que sai
2 formatosHTML/CSS
A marcação com a sua folha de estilos, para projetos sem Tailwind ou para WordPress.
03
Inspire-se, não copie
Propriedade intelectualOs textos, as imagens e os logos de outro site têm dono. Copie a estrutura e o estilo, e coloque o seu conteúdo. Com a primeira Pro chega o modo inspiração, grátis para todos: troca os textos e as imagens por marcadores ao copiar.
| Grátis0 €para sempre | Pro49 €pagamento único | |
|---|---|---|
| Copiar o CSS de cada elemento | ||
| Copiar um bloco como JSX + Tailwind ou HTML/CSS | — | Acesso antecipado grátis |
| Modo inspiração: troca os textos e as imagens por marcadores ao copiar | Com a primeira Pro | Com a primeira Pro |
É grátis?
É uma função Pro. Enquanto não chegar o lançamento da Pro (data por definir), está em acesso antecipado grátis para todos. Depois passa a estar incluída na Pro de 49 €, de pagamento único.
O código sai perfeito?
Sai funcional e próximo do original. As animações feitas com JavaScript e alguns efeitos não se podem traduzir em classes, por isso convém revê-lo.
Usa as cores do meu projeto?
Usa as do site original. Para ter os tokens como variáveis, combine-o com a extração do sistema de design.
Posso copiá-lo para React, Vue ou Elementor?
O JSX funciona diretamente em React. Vue e Elementor estão previstos para versões posteriores.
Em que navegadores e sistemas funciona?
No Chrome, Edge, Brave, Arc, Opera e Vivaldi, em Windows, Mac e Linux, desde a 1.0. Funciona da mesma forma em todos porque quem executa a extensão é o navegador, não o sistema. O código está preparado para chegar ao Firefox e ao Safari sem ser reescrito. Enquanto está em desenvolvimento, pode haver alterações.
06
Continue com
Funções próximasSistema de design
Cores, espaçamentos e tipografia para Tailwind v4 @theme, variáveis CSS ou DESIGN_SPECS.md.
Extrair o sistema de design →Inspetor CSS
Passe o cursor e veja o CSS calculado, a caixa, as margens e as distâncias.
Inspetor CSS →Preços
Grátis para sempre. Pro, 49 € uma única vez.
Ver preços →Lista de espera
Seja dos primeiros a experimentar
O Smart Design Inspector está em desenvolvimento. Deixe o seu email e avisamos no dia em que chegar à Chrome Web Store, com as 7 funções Pro grátis em acesso antecipado.
Um email no dia do lançamento e poucos mais · Cancele com um clique