--- title: "Hacking Frontmatter to add custom colors to my articles using Next.js & Tailwind 🤹🏻‍♂️" excerpt: "I finally did it. Not without some hurdles, and the solution is bad (I know it) but at least it works... I can finally define custom background colors for each of my blog posts! 🎉 I know, I know… It doesn’t seem hard at all. But it is. With my current stack, UI is encapsulated like Russian Dolls, each with their own rules, let me explain." slug: "hacking-frontmatter-to-add-custom-colors-to-my-articles" date: "2025-01-12" category: "Frontend" tags: ["Design", "Frontend", "Tailwind"] author: "Sébastien" image: "/blog/color-article/image2.png" imageFormat: "" cardFormat: "grayscale hover:grayscale-0" bgFormat: "bg-linear-to-tr/decreasing from-indigo-200 via-purple-100 to-pink-200 dark:bg-linear-to-rt/decreasing dark:from-indigo-950/50 dark:via-purple-950/30 dark:to-pink-950/50" status: "published" readingTime: "10 min" --- import Image from 'next/image'; import LinkPreviewCard from '@/components/LinkPreviewCard'; import Link from 'next/link'; # Hacking Frontmatter to customise each blog post background color using Next.js & Tailwind 🤹🏻‍♂️

I finally did it. Not without some hurdles, and the solution is bad (I know it) but at least it works... ## I can finally define custom background colors for each of my blog posts 🎉 I know, I know… It doesn’t seem hard at all. But it is. With my current stack, UI is encapsulated like Russian Dolls, each with their own rules, let me explain.

Front stack as Russian dolls. I really need to improve my hanlding of light and shadows...

### **Next.js pages and layouts** 🪆 - I chose Next.js framework for my project and use **the App structure**, meaning I have `pages.tsx` and `layout.tsx` in different folders and subfolders. - **Pages** manage my content 🏞️. - **Layouts** define, well, the layout 🖼️. - It’s great for separation of concern, keeping UI and content independent, improving reusability. At the cost of, well… extra complexity. **Nested file structure, nested layouts, nested problems** ```json layout.tsx 🖼️ page.tsx 🏞️ ├── layout 🖼️ ├── page.tsx 🏞️ ``` So, I have in the blog section: * A Blog page listing all articles, with its own layout. * Each article has its own `page.tsx`, using Next.js Dynamic Routes and all share the same `layout.tsx`. Essentially, padding. ```json Blog / Layout ├── Article / Layout (Dynamic Routes) ├── Article 1 ├── Article 2 ``` This way, all articles share a common layout. Which was great, **until I wanted to customise individual articles background color... 🎨**

👉🏼 Check outNext.js’ website, it's beautifully designed, their documentation and illustrations are quite good also.

### **My Problems** How can I customise the UI for each article? While keeping the shared layout? And more importantly, without having boilerplate code mixing with content for each article?

💡 It feels like I should pass props from my articles to the `layout.tsx` to control the UI dynamically. 🤨 But it doesn't feel right. Layouts are meant to be shared, while I need per-article customization. I'm not even sure Layouts can and should have access to page content to change the UI. This said, it aligns anyway with my decision to write in MDX, where content dictates design.

So, let's review the rest of my styling stack to find out how I can spice up my posts 🌈. ### **Markdown + MDX** 🪆 I write my articles in **Markdown** because: ✅ It exports easily from Notion where I write (at least for now). ✅ It’s nice and fast to write in. But I also wanted to code inside articles, so I chose **MDX** because: * It blends content & code, giving me more ways to learn and experiment with Typescript. * It lets me create “augmented” articles, with interactive components, animations, and more. Markdown is great, but I can't set up custom background colors in it. I could defineteley do this in MDX / Typescript, but I would do boilerplate code for each article, and I don't want that. #### **How MDX works** MDX compiles my `articles.mdx` writen in a blend of Markdown & TypeScript into React/TypeScript components that Next.js renders via the **Dynamic Routes** I set up. At compile/runtime: 1. **Markdown** → **TS components** 2. **Tailwind kicks in for styling** 3. **Next.js does its thing** I also use "plugins" : 1. **Remark GFM** to parse my Markdown, so I can use GitHub Flavored Markdown in my articles (hello inline code, code blocks, tables, etc.). 2. Most importantly, I use **Frontmatter** to store metadata like title, date, author, etc. It's not UI, but important for what follows. ```json --- title: "Custom Background Colors in Next.js" slug: "custom-backgrounds-nextjs" date: "2024-12-01" category: "Posts" tags: ["Tailwind CSS", "CSS", "Frontend", "yolo"] author: "Sébastien" image: "/firstpost.png" bgColor: "bg-slate-200" darkBgColor: "dark:bg-pink-800" --- ``` I don’t love that it sits at the top of every file, but hey, it works, and it's easy to use. Yes, every article stores in fact content (markdown), data (frontmatter), logic (TSX), so why not adding background colors? 😅 Hello Tailwind. ## **Tailwind** 🪆 I never liked CSS, but Tailwind? It's fire 🔥. Except that Tailwind breaks havocs by overriding every formating by default. Like many before me, after adding MDX to my project, and my first post, I was quite sad to see my beautifully formatted Markdown turns into… 💀 Plain text. ### Meet 🪆: Tailwind Typography The Tailwind Typography plugin: * restores **basic HTML & Markdown formatting**. * gives **h1, h2, p** styling back. * even adds **dark mode support, text modifiers**, etc. But, again… **more layers, more Russian dolls.** When using the plugin with `classname: prose` we override styling like typography scale, **colors** etc. with sometimes unexpected consequences. **My Stack So Far** 📦 **Next.js** (Layouts and Dynamic Route for my articles) 🎨 **Tailwind + Typography** (Fixing Markdown resets) 📜 **MDX, Frontmatter, Remark GFM** (Markdown + Metadata) ## In the end * To avoid boilerplate code in each blog post, I wanted to move upstream as much logic as I could. To keep the content clean, with the minimal input for the styling, like only the color names * Frontmatter was the perfect place to store this, as it's already used for metadata. * 🛑 But I failed to pass props from frontmatter to the `layout.tsx`. * I'm pretty sure it's possible, but without a clean and straightforward way, I decided to stick to my current setup and extend the frontmatter in my page.tsx. Which seems in hindsight the best option to avoid parsing Frontmatter in two places. **Code: `blog/[slug]/page.tsx`** * Fetch Frontmatter data from `.mdx`, where I define the posts' background colors * Then apply the background colors to the full page. ```tsx export default async function Page({ params }: PageProps) { const bgClasses = frontmatter.bgColor || "" return ( <>

{frontmatter.date}
{frontmatter.author}

); } ``` In each **MDX file** or Blog post I define the background colors and other styling option in want to use, directly in Frontmatter, as Metadata. ```tsx --- title: "Custom Background Colors in Next.js" bgColor: "bg-slate-200 dark:bg-pink-800" --- ``` This allows full control over article styles. It's pretty permissive, so a bit dangerous, as I could break the layout easily. But it's a start! ### **Tailwind Dark Mode Issues** * Initially, I set up two keys in Frontmatter for background colors: `bgColor` and `darkBgColor`. * Unfortunately, Tailwind didn’t detect `{dark:}` classes when applied dynamically. I remember reading a while ago in Tailwind documentation, that it scans only static class names at build time, and purges unused ones. * So, I decided to write full Tailwind for light and dark mode in Frontmatter. Not perfect, but it works, and I didn't like the alternative, like safelisting all the colors I could use... And anyway, it's giving me additionnal flexibility, so creativity options! ### Mission success ✅ 💅🏼 I can now customise my Blog posts backgrounds colors and much more, using Tailwind directly in the Frontmatter Metadata.

### Additional ressources