tailwindcss-typography: prose color classes are not working.

I have applied prose prose-blue on my content. However it doesn’t render the links as blue.

See here my blog.

https://nextjs-blog-git-feature-blog-posts.marcofranssen.vercel.app/posts/202006-building-a-elasticsearch-cluster-using-docker-compose-and-traefik

This is my code rendering the markdown

export default function PostBody({ content }) {
  return (
    <div
      className="max-w-4xl mx-auto prose prose-blue"
      dangerouslySetInnerHTML={{ __html: content }}
    />
  );
}

In the html it shows as.

<div class="">
  <p>My blog content including <a href="https://github.com">some link</a>.</p>
</div>

My tailwind.config.js looks as

module.exports = {
  .......
  plugins: [require("@tailwindcss/typography")],
};

Is this a bug? Did I miss something?

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 15 (4 by maintainers)

Most upvoted comments

Hey! Thank you for your bug report! Much appreciated! 🙏

There are multiple issues going on in this thread. I will address some of them and close the issue afterwards. If you still have certain issues after you read this, feel free to open a new issues + reproduction case. Preferably using https://play.tailwindcss.com

If your `.prose` css classes are empty:

Make sure that if you are using the purge option, that you are either making sure that all the prose related classes exists in the files you listed in the purge: [] config. If your prose related content is coming from a database and doesn’t exist in your actual code. Make sure to safelist the prose related classes. See: https://tailwindcss.com/docs/optimizing-for-production#purge-css-options

Using colors

If you are using prose-{color} related classes. These only apply for links (a) and code tags inside of anchors (a code). We use the 600 variant for each color. This means that blue.600 or red.600 should exist.

A bunch of styles disappear

Make sure that if you want to change only specific parts of your typography styles that you put them inside the theme: { extend: { /* ... */ } } section so that you are extending those parts only, instead of throwing everything away.

RobinMalfait on Jan 15, 2021

Trying to experiment with Tailwind on my own website for fun, I stumbled upon the same issue. I was trying to create a custom color primary, and use prose-primary to see how it’d look.

Here’s a screencast:

https://user-images.githubusercontent.com/1311607/103542519-57838080-4e9d-11eb-9cca-b13cfa041945.mp4

sry for the slow compilation time, changing the tailwind config always takes some time

As a reproduction, you can use the following branch: https://github.com/martpie/martpie.io/tree/tailwind-repro

clone,
yarn install --frozen-lockfile
yarn dev
go to localhost:3000/thoughts/i-still-dont-buy-graphql
add a custom color in tailwind.config.js

martpie on Jan 4, 2021