Softonic

CSS a Tailwind

Paso 1 / 2
Convertir a Tailwind

Migrar una hoja de estilos heredada a Tailwind una regla a la vez es tedioso. Este convertidor toma un bloque de CSS simple, con o sin selectores y llaves, y reescribe cada declaración como una utilidad de Tailwind. Los pares reconocidos se mapean a utilidades nombradas como flex, items-center o rounded-lg, y cualquier otra cosa retrocede a la sintaxis de valor arbitrario de Tailwind [property:value], así que nada se pierde silenciosamente.

Cómo procesa el convertidor tu CSS

  1. 1

    Pega el CSS

    Inserta una regla completa como `.card { padding: 16px; border-radius: 8px; }` o solo las declaraciones dentro de las llaves.

  2. 2

    El parser elimina comentarios

    Los comentarios en bloque `/* ... */` se eliminan antes de que las declaraciones se dividan por punto y coma.

  3. 3

    Cada declaración se mapea

    Las propiedades comunes se mapean a utilidades reales de Tailwind (espaciado, radio, tamaño de fuente, flex, visualización, alineación de texto); las desconocidas recurren a `[prop:value]`.

  4. 4

    Copia y aplica

    Pega la lista de clases en el atributo `class` del elemento HTML correspondiente.

Lo que se mapea a utilidades nombradas

El tema predeterminado de Tailwind no puede cubrir cada posible valor CSS, así que el convertidor prioriza aquellos donde existe una utilidad nombrada y utiliza valores arbitrarios en otros lugares.

Mapeos directos

Declaración CSS Utilidad Tailwind
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Mapeos conscientes de la escala

El padding, margen, ancho, alto, dimensiones mínimas/máximas dividen un valor en px por 4 para producir un paso de espaciado de Tailwind, padding: 16px se convierte en p-4, width: 32px se convierte en w-8. Los valores que no caen en un paso limpio recurren a valores arbitrarios en la utilidad correspondiente, por ejemplo width: 37px se convierte en w-[37px].

border-radius se mapea a la utilidad nombrada más cercana (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl). Los tamaños superiores a 16px se convierten en rounded-full, lo cual es útil para píldoras pero incorrecto para radios inusualmente grandes, inspecciona la salida antes de enviar.

font-size se agrupa en text-xs hasta text-3xl por umbrales de píxeles.

Advertencias

  • Las pseudo-clases, consultas de medios y selectores no se traducen; solo las declaraciones dentro de las llaves lo son. Aún necesitas agregar variantes como hover: o md: tú mismo.
  • Los colores caen en valores arbitrarios como text-[#1f2937] porque el convertidor no conoce tu paleta de tema de Tailwind. Cambia a text-gray-800 o un token personalizado manualmente.
  • Las propiedades abreviadas que usas raramente (border, background, transition) se emiten tal cual como [property:value], verifícalas antes de enviar.

Preguntas frecuentes

La salida utiliza nombres de utilidades que son estables en Tailwind v3 y v4. Los valores arbitrarios entre corchetes también son válidos en ambos. Puede que desees re-tokenizar los colores en tu paleta @theme de v4 después de pegar.

El convertidor no tiene visibilidad sobre tu escala de color en tailwind.config.js, así que emite el color como un valor arbitrario en la utilidad correspondiente (text-[#1f2937]). Mapéalo al token de paleta más cercano manualmente, por ejemplo text-gray-800 o un token de marca que hayas definido.

Sí, pega múltiples reglas. La herramienta emitirá una lista de clases por selector, separadas por un comentario /* selector */ para que puedas alinearlas con el HTML correspondiente.

El CSS se envía a nuestro servidor para que el convertidor lo transforme en clases de Tailwind. No se almacena y no aparece en el enlace de la página.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Herramienta disponible en otros idiomas