Skip to main content
Si una página con estilos de clases de Tailwind CSS, como una página de destino en modo personalizado, se ve sin estilo en la vista previa en vivo del editor web, es probable que tu marcado sea correcto. La vista previa en vivo muestra tu contenido sin un paso de compilación y no genera el CSS de las clases de Tailwind específicas de cada página.

​
Por qué la vista previa en vivo se ve sin estilo

Mintlify analiza cada página en busca de clases de Tailwind y genera el CSS correspondiente durante la compilación del sitio. Las compilaciones se ejecutan para las implementaciones de producción, las implementaciones de vista previa y las vistas previas locales con mint dev. La vista previa en vivo omite el paso de compilación para poder renderizar al instante, por lo que el CSS de tus clases de Tailwind nunca se genera allí. Si inspeccionas un elemento en la vista previa en vivo, las clases de Tailwind aparecen en el HTML con el prefijo mint-, pero ninguna regla CSS coincide con ellas.

​
Ver tus estilos renderizados con precisión

Para comprobar cómo se muestra una página con estilos de Tailwind, usa una vista previa que incluya una compilación:
  • Ejecuta mint dev en tu repositorio local.
  • Guarda tus cambios en una rama y abre un pull request. Mintlify crea una implementación de vista previa con una URL para compartir.
  • Publica tus cambios y revisa tu sitio en producción.
Si la página sigue viéndose mal en una de estas vistas previas, el problema está en la página misma. Consulta Crear diseños de página personalizados para ver patrones que funcionan.

​
Las páginas en modo personalizado no tienen tipografía predeterminada

Independientemente del comportamiento de la vista previa en vivo, el modo personalizado es un lienzo en blanco. Mintlify no aplica su tipografía predeterminada a las páginas en modo personalizado, por lo que los elementos HTML nativos como <h2> y <p> se muestran con los estilos predeterminados del navegador en todas las vistas previas e implementaciones. Dales estilo explícitamente:
Example styled heading
Este es el comportamiento esperado, no un error de renderizado. Consulta Crear diseños de página personalizados para ver ejemplos completos.

Temas relacionados

Crear diseños de página personalizadosScripts personalizadosVista general de automatizaciones