> ## 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.

# Les classes Tailwind ne s'appliquent pas dans l'aperçu en direct de l'éditeur

> Diagnostiquez pourquoi une page stylisée avec des classes Tailwind CSS, comme une page de destination en mode personnalisé, semble sans style dans l'aperçu en direct de l'éditeur web mais s'affiche correctement sur les déploiements et avec mint dev.

Si une page stylisée avec des classes Tailwind CSS, comme une page de destination en [mode personnalisé](/docs/fr/organize/pages#custom), semble sans style dans l'[aperçu en direct](/docs/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](/docs/fr/deploy/preview-deployments) et les prévisualisations locales avec [`mint dev`](/docs/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`](/docs/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](/docs/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](/docs/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 theme={null}
<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](/docs/fr/guides/custom-layouts) pour des exemples complets.


## Related topics

- [Créer des mises en page personnalisées](/docs/fr/guides/custom-layouts.md)
- [Scripts personnalisés](/docs/fr/customize/custom-scripts.md)
- [Aperçu](/docs/fr/components/index.md)