From 23a92a536ea373a701bc091aed6ed773791abea4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C5=A9=20V=C4=83n=20D=C5=A9ng?= Date: Mon, 23 Dec 2024 19:58:14 +0700 Subject: [PATCH] add notes on tailwind config to mdx-components.tsx documentation --- .../07-configuring/05-mdx.mdx | 51 ++++++++++++++++++- 1 file changed, 49 insertions(+), 2 deletions(-) diff --git a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx b/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx index 4005dd8fc05cd..65532e2ab5f81 100644 --- a/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx +++ b/docs/01-app/03-building-your-application/07-configuring/05-mdx.mdx @@ -522,9 +522,11 @@ export default function MDXPage({ children }) { -### 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 }) { +#### 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: