O Ajudante Tailwind inspeciona qualquer elemento em uma página da web e gera um detalhamento abrangente e categorizado das classes utilitárias Tailwind CSS correspondentes. Ao contrário de uma simples string de classe, ele organiza os resultados por categoria — Layout, Espaçamento, Tipografia, Cores, Bordas e Efeitos — para que você entenda exatamente o que cada classe controla.
Enquanto o Copiar como Tailwind oferece uma string de classe rápida para colar, o Ajudante Tailwind é o companheiro para mergulhos profundos. Ele foi construído para desenvolvedores que desejam entender a composição completa do estilo de um elemento em termos do Tailwind. Cada propriedade CSS computada é mapeada para seu equivalente Tailwind e agrupada em categorias lógicas. Você pode ver rapidamente que um elemento usa layout flex com alinhamento items-center, tem preenchimento p-5 com um gap-3 entre os filhos, usa text-lg font-bold para tipografia e tem uma aparência bg-slate-900 rounded-lg border border-slate-700. Clique em qualquer tag de classe individual para copiar apenas aquela, ou use "Copiar Tudo" para pegar a string completa. A visualização categorizada facilita a escolha exata das classes que você precisa, em vez de copiar tudo.
As classes Tailwind são organizadas em categorias claras: Layout (flex, grid, position), Espaçamento (padding, margin, gap), Tipografia (tamanho da fonte, peso, cor), Cores (fundo, texto, borda), Bordas (raio, largura, estilo) e Efeitos (sombra, opacidade, transformação). Cada categoria é recolhível e claramente rotulada.
Clique em qualquer elemento — botões, cartões, títulos, entradas, contêineres — e o painel é preenchido instantaneamente com o detalhamento completo das classes Tailwind. O elemento é destacado com uma borda roxa para que você saiba exatamente o que está sendo inspecionado.
Cada classe Tailwind é exibida como uma tag clicável. Clique em qualquer tag individual (como p-5 ou font-bold) para copiar apenas aquela classe para sua área de transferência. Uma animação sutil de "copiado" confirma a ação. Perfeito para quando você precisa apenas de uma ou duas classes específicas.
O botão "Copiar Todas as Classes" na parte inferior gera uma string limpa, separada por espaços, de todas as classes Tailwind e a copia para sua área de transferência. Pronta para colar diretamente em className="..." ou class="...".
Cada valor é mapeado para a escala padrão de espaçamento e dimensionamento do Tailwind. Uma fonte de 16px mapeia para text-base, preenchimento de 24px mapeia para p-6 e #7c3aed mapeia para purple-600. Quando não existe uma correspondência exata, o valor de escala mais próximo é escolhido e observado.
Passe o mouse sobre qualquer tag de classe Tailwind no painel para ver o valor CSS computado original do qual ela foi gerada. Por exemplo, passar o mouse sobre "p-5" mostra "padding: 20px". Esta visualização bidirecional ajuda você a aprender a escala Tailwind conectando classes a valores CSS reais.
Ajudante Tailwind covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*Ao contrário de uma string de classe plana, a visualização categorizada permite que você entenda a composição completa de um elemento. Veja que um cartão usa layout flex, preenchimento específico, tipografia em negrito, um fundo slate, bordas arredondadas e uma sombra sutil — cada aspecto em sua própria seção.
Inspecione um elemento bem projetado em qualquer site e, em seguida, recrie-o em seu projeto Tailwind copiando as classes de categoria relevantes. Pegue o layout de um elemento, a tipografia de outro e as cores da sua paleta de marca — misture e combine.
Passe o mouse sobre as tags de classe para ver os valores de origem CSS. Este mapeamento interativo é a maneira mais rápida de aprender que p-4 significa 16px, text-lg significa 18px ou que purple-600 é #7c3aed. Transforme qualquer site em um exercício de aprendizado do Tailwind.
Inspecione elementos em seu próprio site construído com Tailwind para verificar se eles estão usando espaçamento, cores e tipografia consistentes do sistema de design. Identifique valores acidentais únicos (como p-[13px]) que deveriam ser valores de escala padrão (p-3 ou p-3.5).
Use o Copiar como Tailwind quando precisar de uma string de classe rápida para colar. Use o Ajudante Tailwind quando quiser estudar o detalhamento, copiar classes individuais seletivamente ou entender por que classes Tailwind específicas foram escolhidas para cada propriedade CSS.
Abra o dock flutuante do DevSuite Pro e clique no ícone do Ajudante Tailwind. A ferramenta é ativada e um painel aparece no lado direito, pronto para exibir os detalhamentos das classes.
Clique em qualquer elemento na página. Ele é destacado com uma borda roxa e o painel é preenchido com classes Tailwind categorizadas. Cada categoria (Layout, Espaçamento, Tipografia, Cores, Bordas, Efeitos) é mostrada como uma seção com tags de classe.
Navegue pelas categorias para entender a composição completa do estilo do elemento. Cada classe é uma tag clicável — passe o mouse para ver o valor CSS de origem, clique para copiar essa classe individual.
Clique em tags individuais para copiar classes específicas ou use o botão "Copiar Todas as Classes" na parte inferior para pegar tudo como uma única string. Cole diretamente no seu componente Tailwind.
Clique em um elemento diferente na página para atualizar instantaneamente o painel com novas classes. Não há necessidade de desativar e reativar — basta continuar clicando para inspecionar vários elementos em sequência.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.