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.2 KiB
Plaintext
42 lines
3.2 KiB
Plaintext
---
|
|
title: "Les classes Tailwind ne s'appliquent pas dans l'aperçu"
|
|
description: "L'aperçu en direct de l'éditeur ignore le build qui génère le CSS de Tailwind. Vérifiez le style avec mint dev ou un déploiement de prévisualisation."
|
|
keywords: ["tailwind ne fonctionne pas", "classes tailwind non appliquées", "page personnalisée semble cassée", "aperçu de l'éditeur sans style", "styles manquants dans l'aperçu en direct", "mode personnalisé sans styles"]
|
|
---
|
|
|
|
Si une page stylisée avec des classes Tailwind CSS, comme une page de destination en [mode personnalisé](/fr/organize/pages#custom), semble sans style dans l'[aperçu en direct](/fr/editor/review#live-preview) de l'éditeur web, votre balisage est probablement correct. L'aperçu en direct affiche votre contenu sans étape de build et ne génère pas le CSS des classes Tailwind propres à une page.
|
|
|
|
<div id="why-the-live-preview-looks-unstyled">
|
|
## Pourquoi l'aperçu en direct semble sans style
|
|
</div>
|
|
|
|
Mintlify analyse chaque page à la recherche de classes Tailwind et génère le CSS correspondant lors du build du site. Les builds s'exécutent pour les déploiements en production, les [déploiements de prévisualisation](/fr/deploy/preview-deployments) et les prévisualisations locales avec [`mint dev`](/fr/cli/commands#mint-dev). L'aperçu en direct saute l'étape de build afin de pouvoir s'afficher instantanément ; le CSS de vos classes Tailwind n'y est donc jamais généré.
|
|
|
|
Si vous inspectez un élément dans l'aperçu en direct, les classes Tailwind apparaissent dans le HTML avec un préfixe `mint-`, mais aucune règle CSS ne leur correspond.
|
|
|
|
<div id="see-your-styles-rendered-accurately">
|
|
## Voir vos styles rendus fidèlement
|
|
</div>
|
|
|
|
Pour vérifier le rendu d'une page stylisée avec Tailwind, utilisez une prévisualisation qui inclut un build :
|
|
|
|
- Exécutez [`mint dev`](/fr/cli/commands#mint-dev) dans votre dépôt local.
|
|
- Enregistrez vos modifications sur une branche et ouvrez une pull request. Mintlify génère un [déploiement de prévisualisation](/fr/deploy/preview-deployments) avec une URL partageable.
|
|
- Publiez vos modifications et vérifiez votre site en ligne.
|
|
|
|
Si la page semble toujours incorrecte dans l'une de ces prévisualisations, le problème vient de la page elle-même. Consultez [Créer des mises en page personnalisées](/fr/guides/custom-layouts) pour des modèles fonctionnels.
|
|
|
|
<div id="custom-mode-pages-have-no-default-typography">
|
|
## Les pages en mode personnalisé n'ont pas de typographie par défaut
|
|
</div>
|
|
|
|
Indépendamment du comportement de l'aperçu en direct, le mode personnalisé est une toile vierge. Mintlify n'applique pas sa typographie par défaut aux pages en mode personnalisé ; les éléments HTML natifs comme `<h2>` et `<p>` s'affichent donc avec les styles par défaut du navigateur sur chaque prévisualisation et chaque déploiement. Stylisez-les explicitement :
|
|
|
|
```mdx Example styled heading
|
|
<h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50">
|
|
Features
|
|
</h2>
|
|
```
|
|
|
|
Il s'agit d'un comportement attendu, pas d'un bug de rendu. Consultez [Créer des mises en page personnalisées](/fr/guides/custom-layouts) pour des exemples complets.
|