prose color classes are not working.

[marcofranssen]

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?

[adamwathan]

It looks like the classes aren't actually being added, is React removing them for some reason? Try using vanilla HTML to troubleshoot and isolate the problem so you know what the root cause is.

[marcofranssen]

@adamwathan I updated my code a bit, now I do see the classes on my element, however the styling is not there. Any chance you have experience using this with next.js?

https://nextjs-blog-git-feature-mdx.marcofranssen.vercel.app/posts/202004-use-the-acme-dns-challenge-to-get-a-tls-certificate

[adamwathan]

Yeah it should work, do you have a repo I can look at?

[arpowers]

Having same issue.

[sevenseacat]

Having the same issue - the generated CSS just doesn't provide any styles, except for coolGray and blueGray for some reason.

.prose-rose {
}

.prose-pink {
}

.prose-fuchsia {
}

.prose-purple {
}

.prose-violet {
}

.prose-indigo {
}

.prose-blue {
}

.prose-lightBlue {
}

.prose-cyan {
}

.prose-teal {
}

.prose-emerald {
}

.prose-green {
}

.prose-lime {
}

.prose-yellow {
}

.prose-amber {
}

.prose-orange {
}

.prose-red {
}

.prose-warmGray {
}

.prose-trueGray {
}

.prose-coolGray a {
  color: #4b5563;
}

.prose-coolGray a code {
  color: #4b5563;
}

.prose-blueGray a {
  color: #475569;
}

.prose-blueGray a code {
  color: #475569;
}

[adamwathan]

Can't help until someone provides a reproduction.

[sevenseacat]

It seems to only happen when customizing colours in tailwind.config.js.

https://github.com/sevenseacat/tailwind-colors-repro

.: ~/P/e/tailwind-colors-repro : master (7e3ef00) : 2:08pm :.
$ npx tailwindcss-cli@latest build tailwind.css -o compiled.css
npx: installed 90 in 27.858s

   tailwindcss 2.0.2

   🚀 Building: tailwind.css

   ✅ Finished in 18 s
   📦 Size: 7.71MB
   💾 Saved to compiled.css

in compiled.css:

// ...

.prose-2xl > :last-child {
  margin-bottom: 0;
}

.prose-rose {
}

.prose-pink {
}

.prose-fuchsia {
}

.prose-purple {
}

.prose-violet {
}

.prose-indigo {
}

.prose-blue {
}

.prose-lightBlue {
}

.prose-cyan {
}

.prose-teal {
}

.prose-emerald {
}

.prose-green {
}

.prose-lime {
}

.prose-yellow {
}

.prose-amber {
}

.prose-orange {
}

.prose-red {
}

.prose-warmGray {
}

.prose-trueGray {
}

.prose-coolGray a {
  color: #4b5563;
}

.prose-coolGray a code {
  color: #4b5563;
}

.prose-blueGray a {
  color: #475569;
}

.prose-blueGray a code {
  color: #475569;
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

// ...

Removing the colors key in tailwind.config.js generates the styles for the basic set of colours as expected.

[marcofranssen]

In my case I see there is no color prose classes at all in the css.

https://nextjs.marcofranssen.nl/_next/static/css/410dc83624a7dd542018.css

my tailwind config looks as following.

module.exports = {
  purge: ["./pages/**/*.js", "./components/**/*.js"],
  theme: {
    extend: {
      colors: {
        "accent-1": "#FAFAFA",
        "accent-2": "#EAEAEA",
        "accent-7": "#333",
        success: "#0070f3",
        cyan: "#79FFE1",
      },
      spacing: {
        28: "7rem",
      },
      letterSpacing: {
        tighter: "-.04em",
      },
      lineHeight: {
        tight: 1.2,
      },
      fontSize: {
        "5xl": "2.5rem",
        "6xl": "2.75rem",
        "7xl": "4.5rem",
        "8xl": "6.25rem",
      },
      boxShadow: {
        small: "0 5px 10px rgba(0, 0, 0, 0.12)",
        medium: "0 8px 30px rgba(0, 0, 0, 0.12)",
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

my postcss.config looks like this

module.exports = {
  plugins: [
    "tailwindcss",
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
  ],
};

I can now also confirm if I remove the theme.extend.colors from my tailwind config the colors start working.

[martpie]

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:

screencast.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

[slavarazum]

Looks like extending theme colors affects generation of prose-color classes.

[martpie]

Worth adding that not using extend but the following will work with .prose-primary

module.exports = {
  purge: ['./pages/**/*.tsx', './components/**/*.tsx', './layouts/**/*.tsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    colors: { // not using extend for colors
      primary: {
        600: '#3c7b9f',
        900: '#2d4f5d',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
};

[RobinMalfait]

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.

[martpie]

Thank you @RobinMalfait ! I oddly could not reproduce it with Tailwind Play (https://play.tailwindcss.com/RehCJ55iWY?file=config) (seems to be working fine), probably due to the color.600 variant existing indeed.

I will open a new issue if I can reproduce it.

[sevenseacat]

I'm not too sure how the Tailwind Play site works, but I'd expect this to work and have a red link? https://play.tailwindcss.com/yRlhEdUVtS

It does if I remove the modifiers key in the config, but the docs say "The DEFAULT modifier is always included and cannot be disabled.". So again I'm not sure what's going on...

[varundhand]

I know I'm late but apparently the Tailwind plugin provided on the website doesnt work, I used this cdn instead and it did the trick:

<link rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css" />