Skip to main content
Si 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, 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.

​
Pourquoi l’aperçu en direct semble sans style

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 et les prévisualisations locales avec 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.

​
Voir vos styles rendus fidèlement

Pour vérifier le rendu d’une page stylisée avec Tailwind, utilisez une prévisualisation qui inclut un build :
  • Exécutez 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 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 pour des modèles fonctionnels.

​
Les pages en mode personnalisé n’ont pas de typographie par défaut

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 :
Example styled heading
Il s’agit d’un comportement attendu, pas d’un bug de rendu. Consultez Créer des mises en page personnalisées pour des exemples complets.

Sujets connexes

Créer des mises en page personnaliséesScripts personnalisésAperçu