Destaque Featured Destacados
CSS para classes Tailwind CSS to Tailwind classes CSS a clases Tailwind
Mapeamento heurístico de declarações CSS comuns para utilitários Tailwind v3 e valores arbitrários. Revise o resultado no seu projeto. Heuristic mapping of common CSS declarations to Tailwind v3 utilities and arbitrary values. Review in your project. Mapeo heurístico de declaraciones CSS habituales a utilidades Tailwind v3 y valores arbitrarios. Revisa en tu proyecto.
{{ t("cssToTailwindHint") }}
Descrição Overview Descripción
Tailwind CSS trabalha com classes utilitárias em vez de folhas com dezenas de regras soltas. Em migrações ou ao copiar snippets de design, ajuda ter um ponto de partida: esta ferramenta lê declarações `propriedade: valor` (com ou sem blocos `{}`), ignora comentários `/* */` e sugere classes como `flex`, `justify-center`, espaçamentos em escala (`p-4`, `gap-6`) ou arbitrários (`[margin:12px]`).
Não cobre 100% da especificação CSS nem plugins Tailwind (typography, forms). Sempre valide visualmente e ajuste breakpoints (`md:`, `lg:`) manualmente.
Tailwind favors utility classes instead of long ad-hoc stylesheets. When migrating or pasting design snippets, a starting point helps: this tool reads `property: value` declarations (with or without `{}`), skips `/* */` comments, and suggests classes such as `flex`, `justify-center`, scale spacing (`p-4`, `gap-6`), or arbitrary values (`[margin:12px]`).
It does not cover all of CSS or Tailwind plugins (typography, forms). Always verify visually and add breakpoints (`md:`, `lg:`) yourself.
Tailwind usa clases utilitarias en lugar de hojas largas. En migraciones o al pegar snippets de diseño, conviene un punto de partida: esta herramienta lee declaraciones `propiedad: valor` (con o sin `{}`), omite comentarios `/* */` y sugiere clases como `flex`, `justify-center`, espaciado de escala (`p-4`, `gap-6`) o arbitrario (`[margin:12px]`).
No cubre todo CSS ni plugins (typography, forms). Valida en pantalla y añade breakpoints (`md:`, `lg:`) a mano.
Exemplo Sample Ejemplo
display: flex;
justify-content: center;
padding: 16px;Perguntas frequentes FAQ Preguntas frecuentes
Para que serve esta ferramenta?
What is this tool for?
¿Para qué sirve esta herramienta?
Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
It runs fully in your browser: useful to validate, format, or convert data in everyday development.
Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.
Meus dados são enviados a algum servidor?
Are my inputs sent to a server?
¿Se envían mis datos a algún servidor?
O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
Processing happens locally with JavaScript. We do not store what you paste into the text areas.
El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.
Posso usar em produção ou para dados reais?
Can I use this for real production data?
¿Puedo usarlo con datos reales en producción?
Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.
Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.
Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.