¿Puede convertir CSS a Tailwind?

Sí. Pegue un bloque de declaración CSS y Tailfind lo aplicará a un elemento de muestra antes de exportar la lista de clases Tailwind más cercana.

¿Se conservan los valores personalizados?

Tailfind asigna valores a las utilidades Tailwind predeterminadas cuando es posible y mantiene los valores no predeterminados visibles como utilidades arbitrarias en lugar de ocultarlos.

¿Debo pegar una hoja de estilo completa?

El convertidor CSS está diseñado para bloques de declaración. Utilice el convertidor HTML/CSS cuando necesite selectores, clases, marcas anidadas o una hoja de estilo más completa.

Convertidor CSS a Tailwind

Pegue un bloque de declaración CSS y convierta la muestra renderizada en clases Tailwind que pueda copiar en componentes.

CSS

Tailwind v4

Aún no hay salida

La salida Tailwind generada aparece aquí automáticamente.

Convertidor Tailwind de píxeles perfectos

Convierta CSS en clases Tailwind limpias

Primera conversión de declaración: Pegue un bloque de declaración CSS y Tailfind lo aplicará a un elemento de muestra antes de convertir el resultado renderizado en clases Tailwind reutilizables.
Preferencia de utilidad predeterminada: Los valores predeterminados de Tailwind portátiles se conservan cuando los valores de declaración coinciden con la escala del marco.
Retorno de valor arbitrario: Los valores no predeterminados se convierten en utilidades arbitrarias explícitas, por lo que los píxeles, colores, sombras y tiempos personalizados son fáciles de inspeccionar.
Salida segura para el diseño: El espaciado, el tamaño, la visualización, la cuadrícula, la flexión, los bordes, las sombras y la tipografía se asignan a partir de la muestra renderizada.
Extracción rápida de clases: El resultado es una lista de clases Tailwind enfocada que está lista para copiar en un componente, pico de token o paso de limpieza.
Bueno para auditorías: Úselo para reemplazar bloques CSS únicos, experimentos de estilo en línea y prototipos de sistemas de diseño con utilidades Tailwind más claras.

Guía del convertidor CSS

Convierta las declaraciones CSS en utilidades Tailwind

El convertidor CSS a Tailwind convierte un bloque de declaración en las clases de utilidad Tailwind portátiles más cercanas. Es útil para tokens de diseño únicos, limpieza de estilos en línea y mover pequeños fragmentos CSS al marcado de componentes.

Tailfind aplica las declaraciones a un elemento de muestra antes de la conversión, por lo que los valores de diseño, espaciado, color, borde, sombra, tipografía y tamaño se interpretan a través de la misma ruta de representación del navegador utilizada por la extensión.

Úselo para convertir propiedades CSS en clases Tailwind, verificar qué valores se asignan a la escala Tailwind predeterminada y mantener explícitos los valores no predeterminados como utilidades arbitrarias.

¿Puede convertir CSS a Tailwind?: Sí. Pegue un bloque de declaración CSS y Tailfind lo aplicará a un elemento de muestra antes de exportar la lista de clases Tailwind más cercana.
¿Se conservan los valores personalizados?: Tailfind asigna valores a las utilidades Tailwind predeterminadas cuando es posible y mantiene los valores no predeterminados visibles como utilidades arbitrarias en lugar de ocultarlos.
¿Debo pegar una hoja de estilo completa?: El convertidor CSS está diseñado para bloques de declaración. Utilice el convertidor HTML/CSS cuando necesite selectores, clases, marcas anidadas o una hoja de estilo más completa.

Saltar conversión manual

Convierta cualquier página activa en Tailwind CSS limpia

Tailfind lleva el convertidor a su navegador, para que pueda capturar la interfaz de usuario de producción directamente desde la página que está viendo.

Más información

Descargar