¿Qué es tweakcn.com y para qué sirve?
tweakcn.com es una herramienta web visual —sin necesidad de código— diseñada para editar temas de interfaces creadas con shadcn/ui y Tailwind CSS. Permite personalizar colores, tipografía y estilos de tus componentes de forma interactiva y con vista previa en tiempo real.
¿Para qué sirve tweakcn.com?
- Editor visual en tiempo real: usa sliders, selectores de color y ajustes tipográficos para ver cambios inmediatamente.
- Compatible con Tailwind CSS v3 y v4: puedes cambiar fácilmente entre versiones y usar modos de color como OKLCH o HSL.
- Exportación sencilla de código: con un clic genera variables CSS que puedes añadir directamente a tu archivo
tailwind.config.jso usar en tu proyecto React/Next.js. - Presets de temas: incluye esquemas de colores predefinidos (modo claro/oscuro) que puedes editar para adaptarlos a tu marca.
Ventajas destacadas
- Sin necesidad de tocar archivos de configuración manualmente— ideal para diseñadores o desarrolladores que prefieren una experiencia visual.
- Muy rápido y responsivo — los cambios se reflejan en tiempo real mientras ajustas los estilos.
- Open-source con comunidad activa — el proyecto en GitHub cuenta con más de 6 k estrellas, lo que habla del interés y respaldo de la comunidad.
Opiniones de usuarios
«Esta es una gran herramienta […] esto es un gran paso adelante si todo te parece igual.»
— Usuario en Reddit sobre tweakcn.com
Conclusión
Si estás usando shadcn/ui con Tailwind CSS y quieres personalizar el diseño de tus componentes sin preocuparte por archivos de configuración o compilación, tweakcn.com es una herramienta invaluable. Combina facilidad de uso, potencia visual y exportación directa de código listo para producción.
