Gatsby Remark Classes screenshot

Gatsby Remark Classes

Author Avatar Theme by Chrisg86
Updated: 26 Jul 2025
12 Stars

Automatically add class attributes to markdown elements

Overview

Gatsby-remark-classes is a powerful plugin designed to enhance your markdown content in Gatsby sites by automatically adding class attributes to various markdown elements. This functionality allows developers to apply custom styles effortlessly, ensuring that their content not only looks good but also integrates seamlessly into existing design systems, such as atomic CSS or frameworks like Tailwind CSS.

By utilizing this plugin, you can streamline your workflow when styling markdown components, providing a smoother path to achieving a polished and responsive design without the overhead of manual class assignments.

Features

  • Automatic Class Addition: Automatically assigns class attributes to markdown elements, saving you time and effort when styling.
  • Customizable Class Mapping: Define which classes to assign to specific elements through a user-friendly configuration process.
  • Supports Various Selectors: Allows targeting of common markdown elements like headers, lists, and paragraphs with updated selectors for easier management.
  • Enhanced Targeting Capabilities: Access to child and adjacent element targeting for fine-tuned control over styling.
  • Compatibility with Popular Frameworks: Works well with popular CSS frameworks, ensuring flexibility in design even with atomic CSS setups.
  • Upgrade Guide Provided: Clear instructions for upgrading from previous versions help maintain project integrity and ease transitions.