BCome — plataforma

Contexto

BCome mide circularidad y sostenibilidad para marcas de ecommerce. Mi alcance son tres superficies, no una:

• La app principal (React, 5.246 commits, 1.702 míos). Empezó en marzo de 2021 con React 16, Node 14 y Bootstrap 4; entré en diciembre de 2024 y hoy soy el autor número uno de veintiséis.
• El panel de administración, un repositorio aparte en React 17, con 563 commits míos. Es la herramienta interna con la que el equipo opera las cuentas de cliente.
• El widget que se embebe en las tiendas de los clientes (client-extension, 114 commits míos). No es un sitio nuestro: es código que corre dentro del ecommerce de otra empresa, con lo que eso implica — no controlás el CSS que lo rodea, ni la versión del navegador, ni cuándo el host va a mover el DOM debajo tuyo.

Esa tercera superficie es la que cambia cómo se escribe todo lo demás. Un componente que sólo tiene que funcionar en tu propia app puede asumir su entorno; uno que se embebe no.

Opciones

Antes de proponer nada medí la deuda: 1.342 estilos inline, 367 colores hexadecimales distintos escritos a mano y un app.scss de 499 líneas donde convivían variables, utilidades y overrides.

Con eso había dos caminos. Reescribir el frontend de cero, que suena bien en una reunión y significa congelar las entregas durante meses. O migrar sobre el código vivo, que es más incómodo y no tiene un día de lanzamiento.

Decisión

Migrar en caliente, con Bootstrap 4 y Tailwind 4 conviviendo mientras dure. Eso obliga a dos decisiones que no son obvias:

Tailwind entra con Preflight desactivado. El reset de Tailwind pisa el de Bootstrap y rompe formularios y botones en pantallas que nadie tocó hace dos años. Sin Preflight, el riesgo desaparece.

Y no se importa el paquete completo: sólo las capas de tema y de utilidades.

@import "tailwindcss/theme";
@import "tailwindcss/utilities";

La consecuencia práctica es que hay clases de Tailwind que no sirven. La clase border pelada es la más traicionera, porque existe y no hace nada visible: Bootstrap declara su propio borde con !important y gana siempre.

- <div className="border border-gray-300">
+ <div className="border-[1px] border-[#DDD]">

Verificación

React 18.3.1, Vite 7.1.6 y Tailwind 4.1.17 en producción, con Bootstrap 4.6.2 todavía presente. corePlugins.preflight: false en tailwind.config.js, con el motivo escrito en un comentario al lado.

Consecuencias

La migración no tiene fecha de fin y eso es a propósito: cada pantalla que se toca sale migrada, y las que nadie toca no corren riesgo. El costo es que hay que recordar las reglas de convivencia, así que están escritas en el CLAUDE.md del repositorio en vez de en la memoria de quien estuvo ahí.