Mairie d'Estagel

Parfait, j’ai bien compris !

Tu écris tes contenus en Markdown (avec Parsedown Extra + PHP), donc tu veux pouvoir ajouter facilement des classes Tailwind-like directement dans tes fichiers .md.

Voici ma liste de classes utilitaires que j’utilise moi-même dans ce genre de contexte (Markdown + PHP).

1. Classes Utilitaires Recommandées (à copier dans ton CSS)

/* ====================== LAYOUT ====================== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* ====================== SPACING ====================== */
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

.m-4 { margin: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

/* ====================== TYPOGRAPHIE ====================== */
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }

/* ====================== COULEURS & FONDS ====================== */
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-blue-600 { background-color: #2563eb; }
.text-white { color: white; }

/* ====================== BORDERS & EFFETS ====================== */
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.transition { transition: all 0.2s ease; }

/* ====================== CARTES & COMPOSANTS ====================== */
.card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    transition: all 0.2s ease;
}
.card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* ====================== RESPONSIVE (exemples) ====================== */
@media (min-width: 640px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:text-3xl { font-size: 1.875rem; }
}

2. Comment les utiliser dans tes fichiers Markdown

Avec Parsedown Extra, tu peux écrire directement :

<div class="card p-6 flex flex-col">

# Titre principal

<div class="flex justify-between items-center mb-6">
    <h2 class="text-2xl font-semibold">Mon article</h2>
    <span class="text-gray-600">12 juillet 2026</span>
</div>

<p class="text-gray-700">Le contenu de mon paragraphe...</p>

</div>

3. Astuces spécifiques à Markdown + Parsedown

Utilise beaucoup les <div class="..."> pour créer des conteneurs.
Pour les tableaux, ajoute une classe sur la table :
```
<table class="w-full border-collapse">
```
Crée des classes récurrentes comme :
- .prose (pour styliser tout le contenu Markdown)
- .content-wrapper
- .section, .hero, etc.

Veux-tu que je te prépare :

Une version plus complète de ce fichier CSS (avec plus de couleurs, espacements, etc.) ?
Un fichier utilities.css prêt à l’emploi avec 50+ classes ?
Des classes spécialement adaptées pour les articles de blog en Markdown ?

Dis-moi le style de tes sites (blog, documentation, landing pages, etc.) et je t’affine la liste.

Voici une version beaucoup plus complète et professionnelle de ton fichier de classes utilitaires, optimisée pour du contenu Markdown avec Parsedown.

`utilities.css` (version étendue)

/* =============================================
   UTILITAIRES CSS - Version Complète
   Pour Markdown + Parsedown
============================================= */

/* ====================== RESET & BASE ====================== */
* {
    box-sizing: border-box;
}

body {
    line-height: 1.7;
}

/* ====================== LAYOUT ====================== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.grid { display: grid; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* ====================== SPACING ====================== */
.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

.m-0 { margin: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }

/* ====================== TYPOGRAPHIE ====================== */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.leading-relaxed { line-height: 1.7; }
.leading-tight { line-height: 1.3; }

/* ====================== COULEURS ====================== */
/* Gris */
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }

.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }

/* Bleu */
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-600 { background-color: #2563eb; }
.text-blue-600 { color: #2563eb; }
.hover\:text-blue-700:hover { color: #1d4ed8; }

/* Vert / Rouge / Orange */
.text-green-600 { color: #16a34a; }
.text-red-600 { color: #dc2626; }
.text-amber-600 { color: #d97706; }

.bg-green-100 { background-color: #dcfce7; }
.bg-red-100 { background-color: #fee2e2; }

/* ====================== BORDERS & EFFETS ====================== */
.rounded { border-radius: 6px; }
.rounded-md { border-radius: 8px; }
.rounded-lg { border-radius: 10px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }

.border { border: 1px solid #e5e7eb; }
.border-gray-200 { border-color: #e5e7eb; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

.transition { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.duration-300 { transition-duration: 300ms; }

/* Hover effects */
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.hover\:scale-105:hover { transform: scale(1.05); }

/* ====================== COMPOSANTS ====================== */
.card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    transition: all 0.2s ease;
}
.card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary {
    background-color: #2563eb;
    color: white;
}
.btn-primary:hover {
    background-color: #1d4ed8;
}

/* ====================== RESPONSIVE ====================== */
@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:text-3xl { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

Comment l’utiliser ?

Crée un fichier utilities.css
Ajoute-le dans ton <head> après ton style principal
Utilise les classes directement dans tes fichiers Markdown

Exemple d’utilisation dans Markdown :

<div class="card p-8 mb-8">

<h2 class="text-3xl font-semibold mb-6 text-gray-800">Mon titre</h2>

<div class="flex flex-col md:flex-row gap-6">
    <div class="flex-1">...</div>
    <div class="flex-1">...</div>
</div>

</div>

Veux-tu que je rajoute d’autres sections (comme des utilitaires pour tableaux, images, alertes, badges, etc.) ?

1. Classes Utilitaires Recommandées (à copier dans ton CSS)

2. Comment les utiliser dans tes fichiers Markdown

3. Astuces spécifiques à Markdown + Parsedown

utilities.css (version étendue)

Comment l’utiliser ?

`utilities.css` (version étendue)