CSS
padding-left: 32px;
Tailwind
pl-8
Herramientas de diseño
CSS a Tailwind — Mapeador de declaraciones
Pega declaraciones CSS y mápealas a clases utilitarias de Tailwind cuando sea posible. Las reglas comunes de maquetación, espaciado y color se convierten en clases estándar; los valores sin coincidencia recurren a la sintaxis de valor arbitrario.
CSSTailwindConvertir
Añadir esta herramienta a favoritos
No se ha seleccionado un modo de almacenamiento de favoritos.
Acciones rápidas
Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.
设计配色
CSS a Tailwind
1. 粘贴对象 / 类 CSS 0 条声明
2. Tailwind 类名
映射能力边界
用正则启发式匹配 CSS 键值到最接近的 Tailwind 工具类。复杂规则（如 `calc()`、多层背景）会回退为任意值（如 `bg-[url(...)]`）或标记为未映射。适合简单布局声明。
Casos de uso
- Convierte CSS de ejemplo a clases de Tailwind
- Limpia exportaciones de herramientas de diseño con estilo de declaraciones
- Mira qué reglas recurren a valores arbitrarios
Cómo usar
- Pega una lista de declaraciones CSS
- Revisa las clases generadas y las reglas omitidas/arbitrarias
- Copia la lista de clases
Entrada y salida de ejemplo
FAQ
¿Se admiten las @media queries?
La herramienta se centra en declaraciones planas. Las media queries y los selectores anidados no se gestionan completamente.
¿Qué pasa si ninguna clase coincide?
Prueba formas de valor arbitrario como bg-[#ff0000] y lista los fragmentos omitidos cuando hace falta.
Herramientas
Herramientas relacionadas
Continúa con otra herramienta traducida para una tarea cercana.
HTML a JSX
HTML a JSX — Conversor de atributos para React
Convierte fragmentos HTML a React JSX en el navegador. Cambia class/for a className/htmlFor, cierra etiquetas vacías y convierte estilos en línea a forma de objeto. La conversión permanece local.
HTML JSX React
Chuleta de colores Tailwind
Chuleta de colores Tailwind — Tablero completo de escalas
Explora las escalas de color de Tailwind CSS (incluidos los pasos 50–950) en un solo tablero. Busca por nombre, escala o HEX y copia nombres de clases utilitarias o valores HEX sin procesar para proyectos CSS.
Diseño Tailwind CSS
Constructor de Grid de Tailwind
Constructor de Grid de Tailwind — Clases y vista previa
Genera clases de Tailwind Grid a partir de columnas, espaciado y número de elementos con una vista previa en vivo: útil para rejillas de tarjetas, maquetaciones de prototipo y experimentos rápidos de columnas.
Tailwind Grid Maquetación