From b9f8c0312f865019fc3fda29be47c2f525de8155 Mon Sep 17 00:00:00 2001
From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com>
Date: Thu, 6 Feb 2025 12:48:49 +0100
Subject: [PATCH] docs: add mdx page (#514)

Co-authored-by: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com>
---
 .../routes/documentation/integrations/mdx.mdx | 58 ++++++++++++++++++-
 .../documentation/styles/tailwind-css.mdx     | 13 ++++-
 2 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/apps/documentation/src/routes/documentation/integrations/mdx.mdx b/apps/documentation/src/routes/documentation/integrations/mdx.mdx
index 3f51c549..6382cbcd 100644
--- a/apps/documentation/src/routes/documentation/integrations/mdx.mdx
+++ b/apps/documentation/src/routes/documentation/integrations/mdx.mdx
@@ -11,4 +11,60 @@ import Breadcrumbs from '@/components/Breadcrumbs'
 
 # MDX
 
-TODO
+## Overview
+
+[MDX](https://mdxjs.com/) is a library that allows writing markdown
+files as React components and import JSX directly within the markdown
+content.
+
+Tuono fully supports MDX.
+
+You can start using it right away with the `with-mdx` template:
+
+```sh
+tuono new tuono-with-mdx --template with-mdx
+```
+
+## Installation
+
+1. Install MDX via your Node.js preferred package manager.
+
+   ```sh
+   npm install @mdx-js/react
+   ```
+
+2. Install also the `@mdx-js/rollup` vite plugin as `devDependency`
+
+   ```sh
+   npm install -D @mdx-js/rollup
+   ```
+
+3. Add the MDX vite plugin to `tuono.config.ts`, as seen in the example below:
+
+   ```ts
+   import type { TuonoConfig } from 'tuono/config'
+   import mdx from '@mdx-js/rollup'
+
+   const config: TuonoConfig = {
+     vite: {
+       optimizeDeps: {
+         exclude: ['@mdx-js/react'],
+       },
+       plugins: [
+         { enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) },
+       ],
+     },
+   }
+
+   export default config
+   ```
+
+## Usage
+
+MDX is ready to go! You can now start declaring any component/route as MDX:
+
+```mdx
+// src/routes/about.mdx
+
+## About page
+```
diff --git a/apps/documentation/src/routes/documentation/styles/tailwind-css.mdx b/apps/documentation/src/routes/documentation/styles/tailwind-css.mdx
index ed1dda34..14ea0c35 100644
--- a/apps/documentation/src/routes/documentation/styles/tailwind-css.mdx
+++ b/apps/documentation/src/routes/documentation/styles/tailwind-css.mdx
@@ -27,10 +27,17 @@ tuono new tuono-with-tailwind --template with-tailwind
 1. Install Tailwind CSS via your Node.js preferred package manager.
 
    ```sh
-   npm install tailwindcss@next @tailwindcss/vite@next
+   npm install tailwindcss
    ```
 
-2. Add the Tailwind CSS vite plugin to `tuono.config.ts`, as seen in the example below:
+2. Install also the `@tailwindcss/vite` vite plugin as `devDependency`
+
+   ```sh
+   npm install -D @tailwindcss/vite
+
+   ```
+
+3. Add the Tailwind CSS vite plugin to `tuono.config.ts`, as seen in the example below:
 
    ```ts
    import type { TuonoConfig } from 'tuono/config'
@@ -45,7 +52,7 @@ tuono new tuono-with-tailwind --template with-tailwind
    export default config
    ```
 
-3. Add the Tailwind CSS directives to `src/styles/global.css`.
+4. Add the Tailwind CSS directives to `src/styles/global.css`.
 
    ```css
    @import 'tailwindcss';