> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Las clases de Tailwind no se aplican en la vista previa en vivo del editor

> Diagnostica por qué 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 pero se muestra correctamente en las implementaciones y con mint dev.

Si una página con estilos de clases de Tailwind CSS, como una página de destino en [modo personalizado](/docs/es/organize/pages#custom), se ve sin estilo en la [vista previa en vivo](/docs/es/editor/review#live-preview) 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.

<div id="why-the-live-preview-looks-unstyled">
  ## Por qué la vista previa en vivo se ve sin estilo
</div>

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](/docs/es/deploy/preview-deployments) y las vistas previas locales con [`mint dev`](/docs/es/cli/commands#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.

<div id="see-your-styles-rendered-accurately">
  ## Ver tus estilos renderizados con precisión
</div>

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`](/docs/es/cli/commands#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](/docs/es/deploy/preview-deployments) 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](/docs/es/guides/custom-layouts) para ver patrones que funcionan.

<div id="custom-mode-pages-have-no-default-typography">
  ## Las páginas en modo personalizado no tienen tipografía predeterminada
</div>

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:

```mdx Example styled heading theme={null}
<h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50">
  Features
</h2>
```

Este es el comportamiento esperado, no un error de renderizado. Consulta [Crear diseños de página personalizados](/docs/es/guides/custom-layouts) para ver ejemplos completos.


## Related topics

- [Crear diseños de página personalizados](/docs/es/guides/custom-layouts.md)
- [Scripts personalizados](/docs/es/customize/custom-scripts.md)
- [Vista general de automatizaciones](/docs/es/automations/index.md)