Tailscan for Tailwind CSS

A ideia central é que você nunca sai da página. Passe o mouse sobre qualquer elemento para ver suas classes Tailwind, pressione Espaço para fixá-lo e então adicione, edite ou oculte classes enquanto o design atualiza em tempo real. As mudanças ficam guardadas por elemento, então você pode experimentar à vontade e copiar todas as edições de uma vez quando terminar. Para quem detesta o ciclo de salvar e recarregar, este é o recurso que paga a ferramenta.

A versão 3 adiciona um painel de IA que converte um pedido em linguagem natural em mudanças do Tailwind. Você digita algo como "deixe este botão maior com cantos arredondados" e as classes se aplicam sozinhas, com a opção de mantê-las como utilitários visíveis. Ele também exporta suas mudanças como código limpo ou prompts reutilizáveis para repetir o mesmo estilo em todo um projeto. O porém está no medidor: o plano permite 1000 pedidos de IA por mês e depois passa você para um modelo mais barato pelo resto do mês.

Você pode converter um elemento em componente Tailwind com um clique. O Tailscan transforma qualquer elemento de qualquer site em um componente Tailwind CSS reutilizável. Isso significa que você pode pegar um card, uma barra de navegação ou um botão de que gosta, convertê-lo e jogar o markup no seu projeto em vez de reescrevê-lo classe por classe. É a parte que transforma inspeção em resultado de verdade, e é por isso que as pessoas o usam em sites que não são delas.

Você pode adicionar qualquer classe e variante do Tailwind, incluindo as que o seu build remove e as que usam valores arbitrários. Traga sua própria configuração do Tailwind e suas extensões de tema aparecem na hora, então as sugestões combinam com o seu projeto e não com o Tailwind padrão. Esse último ponto importa para equipes que dependem de escalas personalizadas, porque um inspetor que só conhece o padrão deixa de servir rápido.

O Tailscan se integra às devtools do navegador. Você pode editar classes dentro do painel das devtools e usar a seleção nativa de elementos, e cada classe é compilada enquanto você digita. O autocompletar sugere a classe certa e mostra uma prévia da sua cor, enquanto um indicador de breakpoint diz qual breakpoint do Tailwind você está vendo. É a diferença entre adivinhar um nome de classe e ser informado dele.

As regiões calculadas e as guias mostram a margem e o padding reais em volta de um elemento, então problemas de alinhamento deixam de ser adivinhação. Uma ferramenta de captura embutida registra parte da tela para uma passagem rápida, e você pode copiar a lista de classes ou o elemento inteiro com suas edições já embutidas. São comodidades pequenas, mas somam ao longo de um dia de trabalho.