Pega CSS y obtén clases de Tailwind v4 para cada selector, o pega clases y recupera el CSS. Hover, focus y los breakpoints se convierten en variantes, y todo lo que no tiene equivalencia aparece en una lista.
Pega reglas de CSS normales y este convertidor devuelve una lista de clases de Tailwind v4 para cada selector, con clases con nombre cuando el tema por defecto tiene una coincidencia exacta y valores arbitrarios como w-[37px] cuando no la tiene. Cambia el sentido para convertir una lista de clases de nuevo en CSS. Los selectores y reglas que no pueden convertirse en clases se listan, nunca se descartan en silencio.
Cómo se convierten las declaraciones habituales (tema por defecto de Tailwind v4)
Pasar una hoja de estilos a Tailwind a mano significa buscar decenas de nombres de clase y hacer de cabeza la conversión de píxeles a rem. Este convertidor hace la búsqueda y las cuentas, muestra qué clases son valores arbitrarios que quizá quieras redondear a la escala y te dice claramente qué reglas tienen que quedarse en un archivo CSS.
Tailwind v4 con el tema por defecto. El espaciado se calcula a partir del valor --spacing de 0.25rem, los nombres de radio siguen la escala de v4 (rounded-xs es 2px, rounded-sm 4px, rounded-md 6px, etc.) y los breakpoints usan los valores en rem de v4.
Solo se usa una clase con nombre cuando da exactamente el mismo valor. Los colores siempre se convierten en valores arbitrarios porque un código hex rara vez coincide exactamente con un tono de la paleta, y los tamaños de fuente se quedan como arbitrarios porque los tamaños de texto con nombre también fijan un interlineado.
Selectores con descendientes, hermanos o atributos, media queries que no son un único min-width, keyframes y otras at-rules, y custom properties. Aparecen en la lista de no convertidos para que los muevas a tu archivo CSS.
Las clases de la tabla del convertidor, los valores arbitrarios y las propiedades arbitrarias vuelven exactamente igual, con el espaciado mostrado en rem suponiendo el --spacing por defecto. Los nombres de colores del tema como bg-blue-500 y las sombras predefinidas no están en la tabla y se listan como omitidos en lugar de adivinarse.
No, pero la sintaxis de propiedad arbitraria [property:value] cubre todo aquello para lo que Tailwind no tiene una utilidad, como [mask-type:luminance]. Este convertidor la usa para cualquier propiedad que no reconoce.
Una regla de tarjeta con un estado hover y un breakpoint para tablet.
Cada declaración se convierte en una clase; las reglas de hover y de breakpoint pasan a ser clases con prefijo en el mismo elemento.
Pega reglas CSS o una lista de clases de Tailwind. Los valores arbitrarios aparecen resaltados y todo lo que no se puede convertir se lista bajo el resultado.
Sentido de la conversión
CSS a Tailwind
Tailwind a CSS
Tu CSS
Tus clases de Tailwind
Selector para el CSS de salida
Resultado
Copiar todo
Copiar clases
Las clases resaltadas son valores arbitrarios: {n} de {t}.
No convertido ({n})
Se ha convertido todo.
Todavía no hay nada que convertir.
el selector necesita una clase en otro elemento o una variante personalizada
la media query no tiene un único breakpoint
at-rule que se mantiene en CSS
custom property, mantenla en CSS o en @theme
no está en la tabla de este convertidor
Empieza gratis · Sin tarjeta de crédito