docs: Add notes on Tailwind config to mdx-components.tsx documentation

docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx

@@ -522,9 +522,11 @@ export default function MDXPage({ children }) {
 
 </PagesOnly>
 
-### Using Tailwind typography plugin
+### With Tailwind CSS
 
-If you are using [Tailwind](https://tailwindcss.com) to style your application, using the [`@tailwindcss/typography` plugin](https://tailwindcss.com/docs/plugins#typography) will allow you to reuse your Tailwind configuration and styles in your markdown files.
+#### Using the Tailwind typography plugin
+
+If you are using [Tailwind CSS](https://tailwindcss.com) to style your application, using the [`@tailwindcss/typography` plugin](https://tailwindcss.com/docs/plugins#typography) will allow you to reuse your Tailwind configuration and styles in your markdown files.
 
 The plugin adds a set of `prose` classes that can be used to add typographic styles to content blocks that come from sources, like markdown.
 
@@ -597,6 +599,51 @@ export default function MDXPage({ children }) {
 
 </PagesOnly >
 
+#### Using Tailwind classes in `mdx-components.tsx`
+
+If you want to use custom Tailwind classes inside `mdx-components.tsx`, you need to add the path to `mdx-components.tsx` to your Tailwind configuration file for Tailwind to discover those classes.
+
+```ts filename="tailwind.config.ts" highlight={8} switcher
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './mdx-components.{js,ts,jsx,tsx}',
+
+    // Or if using `src` directory:
+    // No changes are needed because mdx-components.tsx is already covered
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config
+```
+
+```js filename="tailwind.config.js" highlight={7} switcher
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './mdx-components.{js,ts,jsx,tsx}',
+
+    // Or if using `src` directory:
+    // No changes are needed because mdx-components.tsx is already covered
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
 ## Frontmatter
 
 Frontmatter is a YAML like key/value pairing that can be used to store data about a page. `@next/mdx` does **not** support frontmatter by default, though there are many solutions for adding frontmatter to your MDX content, such as: