postcss-github-markdown-css

PostCSS plugin to add TailwindCSS .dark and .light classes to sindresorhus/github-markdown-css.

Based on: https://github.com/sindresorhus/github-markdown-css/issues/104#issuecomment-1774279738.

Installation

npm install --save-dev postcss-github-markdown-css

Usage

Add the plugin to your postcss configuration file:

1// postcss.config.js
2
3const config = {
4  plugins: {
5    // ...
6    tailwindcss: {},
7    "postcss-github-markdown-css": {},
8  },
9};
10
11module.exports = config;

Alternatively, import the plugin directly using require:

1// postcss.config.js
2
3const githubMarkdownCss = require('postcss-github-markdown-css');
4
5const config = {
6  plugins: {
7    // ...
8    tailwindcss: {},
9    githubMarkdownCss,
10  },
11};
12
13module.exports = config;

Finally, import github-markdown-css as usual.

React example:

1import "github-markdown-css/github-markdown.css";
2
3export function SomeMarkdownComponent() {
4  return (
5    <div className="markdown-body">
6      {/* Your markdown content here */}
7    </div>
8  );
9}

The plugin will automatically add the .dark and .light classes to the .markdown-body element so it works with TailwindCSS dark mode.