De los colores CSS a Tailwind
Hex conocidos mapean a tokens como text-gray-900. Desconocidos: bg-[#1a2b3c].
Cuando un hex coincide con la paleta por defecto, la conversión es limpia y aparece un token como text-gray-900. Los colores de marca casi nunca encajan y terminan escritos como bg-[#1a2b3c], que es lo correcto: aproximar al tono más cercano cambia el resultado de forma visible. Si el color se repite, defínelo como token propio.
Hex de marca
#111827 a menudo cae cerca de gray-900; un hex de marca único suele ser text-[#…] o bg-[#…].
Opacidad
rgba y /opacity se modelan con /50 o bg-black/50. Confirma contraste tras convertir.
Variables de tema
Si el color vive en :root, resuelve el valor antes de esperar un token con nombre.
Probar
.example { display: flex; gap: 1rem; padding: 1rem; }Nota de confianza: verifica el resultado visualmente. El conversor es un borrador para desarrolladores.