CSS personnalisée

Dernière mise à jour le 23 mars 2026

L’éditeur de templates fournit un onglet CSS dédié dans lequel vous pouvez écrire n’importe quel CSS standard. Vos styles s’appliquent aux éléments HTML que vous insérez dans l’onglet HTML lors du rendu.

Si vous souhaitez savoir si une fonctionnalité CSS spécifique est disponible, vous pouvez consulter cette liste de compatibilité pour Chrome 133, la version utilisée par notre moteur actuel (v5). Chrome 133 supporte la quasi-totalité des fonctionnalités CSS modernes, y compris Flexbox, CSS Grid, les propriétés personnalisées, les container queries et la pseudo-classe :has().

Si vos templates utilisent une version de moteur plus ancienne, consultez Nos moteurs pour voir quelle version de Chrome s’applique à votre moteur.

Vous cherchez la mise en page ?

Pour la taille de page, les marges, les mises en page sur une seule page, les fonds pleine page et les sauts de page, consultez Mise en page.

Bibliothèques CSS externes

Écrire votre propre CSS est toujours possible, mais une bibliothèque CSS utilitaire peut accélérer considérablement le développement de templates. Les frameworks comme Bootstrap ont tendance à imposer des opinions marquées en matière de styles d’impression et peuvent perturber votre mise en page. Nous recommandons des outils plus légers comme Tailwind CSS ou Tachyons.

Compte payant uniquement (en général)

Le chargement de CSS via une URL nécessite un compte payant. Consultez Ressources externes pour la définition complète et la disponibilité par offre.

Cela dit, une exception est faite pour la CSS hébergée sur nos propres serveurs — voir Versions hébergées de Tailwind CSS ci-dessous.

Versions hébergées de Tailwind CSS

PDFMonkey fournit des Master Templates, et nous avons mis à disposition des versions hébergées des ressources utilisées pour les construire. Comme ces fichiers sont hébergés sur nos serveurs, ils fonctionnent sur les comptes Free et payants — aucune restriction de ressource externe ne s’applique.

Tailwind CSS v4.x et v3.x (JIT)

Ces versions fonctionnent exactement comme celle disponible via le CDN Tailwind CSS. Incluez le script dans votre onglet HTML, en remplaçant le lien CDN officiel par le nôtre :

<script src="https://pdfmonkey-resources.s3-eu-west-3.amazonaws.com/js/tailwindcss-4.js"></script>

Versions disponibles :

Pour les versions v3.x, vous pouvez personnaliser la configuration comme vous le feriez avec le CDN officiel :

<script src="https://pdfmonkey-resources.s3-eu-west-3.amazonaws.com/js/tailwindcss-3.0.23.js"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          clifford: '#da373d',
        }
      }
    }
  }
</script>
<style type="text/tailwindcss">
  @layer utilities {
    .content-auto {
      content-visibility: auto;
    }
  }
</style>

Tailwind CSS v2.0.3 (historique)

Nous fournissons une version allégée de Tailwind CSS v2.0.3, débarrassée de tout style qui n’a pas de sens dans un contexte d’impression, comme les animations ou les utilitaires responsive. Elle pèse 165 Ko.

Vous pouvez l’importer depuis votre onglet CSS en utilisant :

@import url("https://pdfmonkey-resources.s3.eu-west-3.amazonaws.com/css/tailwind-light.min.css");

Vous pouvez également l’importer depuis l’onglet HTML mais sachez que vos styles seront définis avant, et cela peut rendre plus difficile la surcharge des classes Tailwind.

Styles par document

Le code que vous écrivez dans l’onglet CSS ne peut pas appeler les variables fournies dans le payload du Document. Cela dit, vous pouvez utiliser les propriétés personnalisées CSS (aussi appelées variables CSS) pour passer des valeurs dynamiques à votre CSS sur une base par document.

Par exemple, si vous souhaitez passer une couleur dans vos données :

{
  "color": "#db2777"
}

Vous pouvez créer une propriété personnalisée qui prend sa valeur et la rend disponible pour votre CSS :

<style>
  :root {
    --color: "{{color}}";
  }
</style>

h1 {
  color: var(--color);
}

Cette technique fonctionne pour toute valeur CSS : couleurs, tailles de police, espacements ou même familles de polices.

Questions fréquentes

Peut-on utiliser Tailwind CSS dans les templates PDFMonkey ?
Oui. PDFMonkey héberge plusieurs versions de Tailwind CSS (v2 à v4) sur ses propres serveurs, elles fonctionnent donc sur les comptes Free et payants. Incluez la balise script dans votre onglet HTML en pointant vers la version hébergée.
Comment passer des valeurs CSS dynamiques dans PDFMonkey ?
Utilisez les propriétés personnalisées CSS. Définissez une variable dans une balise <style> de votre HTML en utilisant la syntaxe Liquid (par ex. --color: "{{color}}"), puis référencez-la dans votre onglet CSS avec var(--color). Cela vous permet de changer les couleurs, polices ou espacements par document.
Quelles fonctionnalités CSS PDFMonkey supporte-t-il ?
Le moteur actuel de PDFMonkey (v5) est basé sur Chrome 133, qui supporte la quasi-totalité des fonctionnalités CSS modernes, y compris Flexbox, CSS Grid, les propriétés personnalisées, les container queries et la pseudo-classe :has().
Navigation