Tailscan for Tailwind CSS

La idea central es que nunca sales de la página. Pasa el cursor sobre cualquier elemento para ver sus clases Tailwind, pulsa Espacio para fijarlo y luego añade, edita u oculta clases mientras el diseño se actualiza en tiempo real. Los cambios se guardan por elemento, así que puedes experimentar sin miedo y copiar todas las ediciones de golpe al terminar. Para quien detesta el ciclo de guardar y recargar, esta es la función que justifica la herramienta.

La versión 3 añade un panel de IA que convierte una petición en lenguaje natural en cambios de Tailwind. Escribes algo como "haz este botón más grande con esquinas redondeadas" y las clases se aplican solas, con la opción de conservarlas como utilidades visibles. También exporta tus cambios como código limpio o prompts reutilizables para repetir el mismo estilo en todo un proyecto. El pero está en el medidor: el plan permite 1000 peticiones de IA al mes y después te pasa a un modelo más barato el resto del mes.

Puedes convertir un elemento en componente Tailwind con un clic. Tailscan transforma cualquier elemento de cualquier web en un componente Tailwind CSS reutilizable. Eso significa que puedes coger una tarjeta, una barra de navegación o un botón que te guste, convertirlo y meter el marcado en tu propio proyecto en lugar de reescribirlo clase a clase. Es la parte que convierte la inspección en resultado real, y por eso la gente la usa en webs que no son suyas.

Puedes añadir cualquier clase y variante de Tailwind, incluidas las que tu build purga y las que usan valores arbitrarios. Trae tu propia configuración de Tailwind y tus extensiones de tema aparecen al momento, así que las sugerencias encajan con tu proyecto y no con el Tailwind de serie. Ese último punto importa a los equipos que dependen de escalas personalizadas, porque un inspector que solo conoce lo estándar deja de servirles enseguida.

Tailscan se integra en las devtools del navegador. Puedes editar clases dentro del panel de devtools y usar la selección nativa de elementos, y cada clase se compila mientras escribes. El autocompletado sugiere la clase correcta y previsualiza su color, mientras un indicador de breakpoint te dice qué breakpoint de Tailwind estás viendo. Es la diferencia entre adivinar un nombre de clase y que te lo digan.

Las regiones calculadas y las guías muestran el margen y el padding reales alrededor de un elemento, así que los problemas de alineación dejan de ser una adivinanza. Una herramienta de captura integrada recoge parte de la pantalla para un traspaso rápido, y puedes copiar la lista de clases o el elemento entero con tus ediciones ya incorporadas. Son comodidades pequeñas, pero suman a lo largo de una jornada.