JIT mode breaks style with Next.js and MDX

[git-no]

What version of Tailwind CSS are you using?

2.1.2

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 10.2.0

What version of Node.js are you using?

14.16.1

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS 11.3.1

Reproduction repository

https://github.com/git-no/nextjs-mdx-tailwind-jit-issue

Describe your issue

SOME Tailwind classes do not work in mdx if JIT is active in tailwind.config.js

See in repository https://github.com/git-no/nextjs-mdx-tailwind-jit-issue created for reproduction purpose.

The issue in /posts/example-post shows Tailwind does not use all Tailwind classes in mdx if JIT is active in tailwind.config.js. If JIT is inactive the Tailwind classes in mdx are used fine.

[adamwathan]

Hey! You need to add your MDX paths to your purge array in your tailwind.config.js file, currently with your config Tailwind isn't looking for classes in those files.

[ahmetskilinc]

I'm currently having the same issue, but I have the mdx paths in the content paths array in tailwind.config.js it still isn't working.

tailwind.config.js:

module.exports = {
  content: ["./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}"],
  theme: {},
  plugins: [require("@tailwindcss/typography")],
};

I'm loading tailwind classes from a component in the components folder which is also in the content array.

PostLayout.jsx:

const PostLayout= ({ children }) => {
  return (
    <article className="max-w-none prose prose-stone prose-md dark:prose-invert">
      {children}
    </article>
  );
};

export default PostLayout;

why-i-use-vs-code.mdx:

---
title: Why Do I Use VS Code
---

import PostLayout from "../../layout/PostLayout";

<PostLayout>

# Why do I use VS Code

## What is VS Code

VS Code is a powerful text editor

</PostLayout>