Guías

• CSS frente a Tailwind — El CSS clásico destaca en selectores complejos y animaciones. Tailwind destaca al colocarse junto al markup. La mayoría de equipos usan ambos.
• Del espaciado CSS a Tailwind — padding: 1.5rem se convierte en p-6. Los atajos se expanden a utilidades laterales. Fuera de escala: p-[13px].
• De la tipografía CSS a Tailwind — font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. El color usa text-*.
• De CSS Flexbox a Tailwind — display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
• De CSS Grid a Tailwind — grid-template-columns: repeat(3, 1fr) → grid-cols-3. Pistas personalizadas usan valores arbitrarios.
• De los colores CSS a Tailwind — Hex conocidos mapean a tokens como text-gray-900. Desconocidos: bg-[#1a2b3c].
• De los bordes CSS a Tailwind — border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.
• De CSS responsive a Tailwind — @media (min-width: 768px) → md:. 1024px → lg:. Las consultas complejas requieren revisión.
• De las sombras CSS a Tailwind — Elevaciones comunes → shadow / shadow-lg. Sombras únicas → valores arbitrarios.
• Del posicionamiento CSS a Tailwind — position:absolute → absolute. Los lados mapear a top/right/bottom/left. z-index custom → arbitrario.
• Estrategias de migración de CSS — Prefiere migración incremental: nuevos componentes en Tailwind, luego rutas calientes, CSS legacy hasta reemplazar.

Abrir conversor Extensión de Chrome