CSS a Tailwind

Descripción general

El conversor de CSS a Tailwind mapea propiedades CSS tradicionales a clases de utilidad de Tailwind CSS en tiempo real. Pega CSS a la izquierda y ve la cadena de clases convertida a la derecha. Admite sintaxis anidada, media queries, pseudo-clases, pseudo-elementos y consultas @supports, lo que lo hace útil para migraciones de proyectos, aprender el sistema de nombres de clases de Tailwind o convertir exportaciones de diseño rápidamente.

Cómo se ve una conversión

Entrada con estado hover y un breakpoint responsivo:

.button {
  padding: 0.875rem 1rem;
  margin-left: 16px;
  font-size: 12px;
  color: #3b82f6;

  &:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }

  @media (min-width: 768px) {
    width: 750px;
  }
}

Resultado:

<div class="py-3.5 px-4 ml-4 text-xs text-blue-500 hover:text-blue-700 hover:underline md:w-[750px]">

padding: 0.875rem se convierte en py-3.5, font-size: 12px en text-xs, el &:hover anidado en variantes hover: y min-width: 768px en el prefijo md:.

Usar una configuración personalizada de Tailwind

El panel de configuración en la parte inferior derecha acepta JSON estándar de Tailwind. Sin él, la herramienta usa el tema por defecto y recurre a la sintaxis de valores arbitrarios (w-[750px]) para valores sin clase incorporada. Añadir la configuración de tu proyecto afecta a tres cosas:

  • Colores personalizados: colors["brand-blue"]["600"]: "#1e40af" hace que ese valor hex se convierta en text-brand-blue-600 en lugar de text-[#1e40af]
  • Breakpoints personalizados: screens["tablet"]: { min: "640px", max: "1023px" } hace que la media query correspondiente se convierta en el prefijo tablet:
  • @supports: supports["grid"]: "display: grid" hace que @supports (display: grid) se convierta en supports-grid:

Qué no se convertirá bien

Genera sintaxis de valor arbitrario

  • Expresiones calc() como width: calc(100% - 2rem)
  • Referencias a variables CSS con var()
  • Valores no estándar como padding: 7px (sin paso coincidente en Tailwind)
  • Cadenas complejas de funciones filter

Requiere manejo manual

  • Definiciones de animación @keyframes
  • Prefijos de navegador (-webkit-, -moz-)
  • Áreas nombradas de CSS Grid (grid-template-areas)
  • Declaraciones de propiedades personalizadas (:root { --var: value })

La base de rem es importante

La herramienta convierte valores rem usando 1rem = 16px como base fija. Si tu proyecto define un tamaño de fuente raíz diferente — por ejemplo html { font-size: 62.5% } haciendo que 1rem = 10px — los nombres de clase convertidos serán incorrectos. Ajusta el campo remInPx en el panel de configuración para que coincida con el tamaño de fuente raíz real de tu proyecto.