mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
b34afc88b6
* docs: fix es/fr/zh translation lag and add missing zh workflows redirects * docs: SEO metadata fixes and HTML entity cleanup in touched locale pages --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
42 lines
3.1 KiB
Plaintext
42 lines
3.1 KiB
Plaintext
---
|
|
title: "Las clases de Tailwind no se aplican en la vista previa"
|
|
description: "La vista previa en vivo del editor omite la compilación que genera el CSS de Tailwind. Comprueba los estilos con mint dev o una implementación de vista previa."
|
|
keywords: ["tailwind not working", "tailwind classes not applying", "custom page looks broken", "editor preview unstyled", "live preview missing styles", "custom mode no styles"]
|
|
---
|
|
|
|
Si una página con estilos de clases de Tailwind CSS, como una página de destino en [modo personalizado](/es/organize/pages#custom), se ve sin estilo en la [vista previa en vivo](/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](/es/deploy/preview-deployments) y las vistas previas locales con [`mint dev`](/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`](/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](/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](/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
|
|
<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](/es/guides/custom-layouts) para ver ejemplos completos.
|