El Asistente Tailwind inspecciona cualquier elemento de una página web y genera un desglose completo y categorizado de las clases de utilidad Tailwind CSS coincidentes. A diferencia de una cadena de clases simple, organiza los resultados por categoría — Diseño, Espaciado, Tipografía, Colores, Bordes y Efectos — para que entiendas exactamente qué controla cada clase.
Mientras que Copiar como Tailwind te da una cadena de clases rápida para pegar, el Asistente Tailwind es el compañero de análisis profundo. Está diseñado para desarrolladores que quieren comprender la composición de estilos completa de un elemento en términos de Tailwind. Cada propiedad CSS calculada se mapea a su equivalente Tailwind y se agrupa en categorías lógicas. Puedes ver de un vistazo que un elemento usa layout flex con alineación items-center, tiene padding p-5 con gap-3 entre hijos, usa text-lg font-bold para tipografía, y tiene apariencia bg-slate-900 rounded-lg border border-slate-700. Haz clic en cualquier etiqueta de clase individual para copiar solo esa, o usa "Copiar Todo" para obtener la cadena completa. La vista categorizada facilita seleccionar exactamente las clases que necesitas en lugar de copiar todo.
Las clases Tailwind se organizan en categorías claras: Diseño (flex, grid, position), Espaciado (padding, margin, gap), Tipografía (tamaño de fuente, peso, color), Colores (fondo, texto, borde), Bordes (radio, ancho, estilo) y Efectos (sombra, opacidad, transformación). Cada categoría es colapsable y está claramente etiquetada.
Haz clic en cualquier elemento — botones, tarjetas, encabezados, inputs, contenedores — y el panel se llena al instante con el desglose completo de clases Tailwind. El elemento se resalta con un borde púrpura para que sepas exactamente qué se está inspeccionando.
Cada clase Tailwind se muestra como una etiqueta clicable. Haz clic en cualquier etiqueta individual (como p-5 o font-bold) para copiar solo esa clase al portapapeles. Una sutil animación de "copiado" confirma la acción. Perfecto cuando solo necesitas una o dos clases específicas.
El botón "Copiar Todas las Clases" en la parte inferior genera una cadena limpia separada por espacios de todas las clases Tailwind y la copia al portapapeles. Lista para pegar directamente en className="..." o class="...".
Cada valor se mapea a la escala predeterminada de espaciado y tamaño de Tailwind. Una fuente de 16px se mapea a text-base, un padding de 24px se mapea a p-6, y #7c3aed se mapea a purple-600. Cuando no existe una coincidencia exacta, se elige y se indica el valor de escala más cercano.
Pasa el cursor sobre cualquier etiqueta de clase Tailwind en el panel para ver el valor CSS calculado original del que fue generada. Por ejemplo, pasar el cursor sobre "p-5" muestra "padding: 20px". Esta vista bidireccional te ayuda a aprender la escala Tailwind conectando clases con valores CSS reales.
Asistente Tailwind covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*A diferencia de una cadena de clases plana, la vista categorizada te permite entender la composición completa de un elemento. Ve que una tarjeta usa layout flex, padding específico, tipografía en negrita, un fondo slate, bordes redondeados y una sombra sutil — cada aspecto en su propia sección.
Inspecciona un elemento bien diseñado en cualquier sitio web, luego recréalo en tu proyecto Tailwind copiando las clases de categoría relevantes. Toma el layout de un elemento, tipografía de otro y colores de tu paleta de marca — mezcla y combina.
Pasa el cursor sobre las etiquetas de clase para ver los valores CSS fuente. Este mapeo interactivo es la forma más rápida de aprender que p-4 significa 16px, text-lg significa 18px, o que purple-600 es #7c3aed. Convierte cualquier sitio web en un ejercicio de aprendizaje de Tailwind.
Inspecciona elementos en tu propio sitio construido con Tailwind para verificar que usan espaciado, colores y tipografía consistentes del sistema de diseño. Detecta valores únicos accidentales (como p-[13px]) que deberían ser valores de escala estándar (p-3 o p-3.5).
Usa Copiar como Tailwind cuando necesites una cadena de clases rápida para pegar. Usa el Asistente Tailwind cuando quieras estudiar el desglose, copiar clases individuales de forma selectiva, o entender por qué se eligieron clases Tailwind específicas para cada propiedad CSS.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono del Asistente Tailwind. La herramienta se activa y aparece un panel en el lado derecho, listo para mostrar desgloses de clases.
Haz clic en cualquier elemento de la página. Se resalta con un borde púrpura, y el panel se llena con clases Tailwind categorizadas. Cada categoría (Diseño, Espaciado, Tipografía, Colores, Bordes, Efectos) se muestra como una sección con etiquetas de clase.
Navega por las categorías para entender la composición de estilos completa del elemento. Cada clase es una etiqueta clicable — pasa el cursor para ver el valor CSS fuente, haz clic para copiar esa clase individual.
Haz clic en etiquetas individuales para copiar clases específicas, o usa el botón "Copiar Todas las Clases" en la parte inferior para obtener todo como una sola cadena. Pega directamente en tu componente Tailwind.
Haz clic en un elemento diferente de la página para actualizar instantáneamente el panel con nuevas clases. No es necesario desactivar y reactivar — sigue haciendo clic para inspeccionar múltiples elementos en secuencia.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.