From b6bdbe3f9cdbb917d455a40db299ffae9533b0a3 Mon Sep 17 00:00:00 2001
From: Inesh Bose <dev@inesh.xyz>
Date: Sun, 28 Apr 2024 15:07:27 +0100
Subject: [PATCH] docs: update examples, closes #841

---
 .github/ISSUE_TEMPLATE/bug-report.md          | 26 -------------
 .github/ISSUE_TEMPLATE/bug-report.yml         | 38 +++++++++++++++++++
 .github/ISSUE_TEMPLATE/config.yml             | 18 +++++++--
 .github/ISSUE_TEMPLATE/feature-request.md     | 20 ----------
 .github/ISSUE_TEMPLATE/feature-request.yml    | 20 ++++++++++
 .github/ISSUE_TEMPLATE/question.md            | 10 ++---
 docs/components/TailwindText.vue              |  2 +-
 docs/content/3.examples/1.basic.md            |  6 +--
 docs/content/3.examples/2.dark-mode.md        | 21 ++--------
 docs/content/3.examples/3.content.md          | 18 +++++++++
 docs/content/3.examples/3.nuxt-ui.md          |  9 -----
 docs/content/3.examples/4.postcss-plugin.md   | 12 ------
 docs/content/3.examples/4.tailwind-plugins.md |  8 ++++
 docs/content/3.examples/5.daisyui.md          | 11 ------
 docs/content/3.examples/5.postcss-config.md   | 13 +++++++
 docs/content/3.examples/6.daisyui.md          |  9 +++++
 docs/content/3.examples/6.flowbite.md         |  8 ----
 docs/content/3.examples/7.flowbite.md         |  8 ++++
 docs/content/3.examples/7.tailwind-icons.md   |  8 ----
 docs/content/3.examples/8.content.md          | 16 --------
 docs/content/3.examples/8.nuxt-ui.md          |  9 +++++
 21 files changed, 149 insertions(+), 141 deletions(-)
 delete mode 100644 .github/ISSUE_TEMPLATE/bug-report.md
 create mode 100644 .github/ISSUE_TEMPLATE/bug-report.yml
 delete mode 100644 .github/ISSUE_TEMPLATE/feature-request.md
 create mode 100644 .github/ISSUE_TEMPLATE/feature-request.yml
 create mode 100644 docs/content/3.examples/3.content.md
 delete mode 100644 docs/content/3.examples/3.nuxt-ui.md
 delete mode 100644 docs/content/3.examples/4.postcss-plugin.md
 create mode 100644 docs/content/3.examples/4.tailwind-plugins.md
 delete mode 100644 docs/content/3.examples/5.daisyui.md
 create mode 100644 docs/content/3.examples/5.postcss-config.md
 create mode 100644 docs/content/3.examples/6.daisyui.md
 delete mode 100644 docs/content/3.examples/6.flowbite.md
 create mode 100644 docs/content/3.examples/7.flowbite.md
 delete mode 100644 docs/content/3.examples/7.tailwind-icons.md
 delete mode 100644 docs/content/3.examples/8.content.md
 create mode 100644 docs/content/3.examples/8.nuxt-ui.md

diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
deleted file mode 100644
index 22ac29e2..00000000
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-name: Bug report
-about: Report a bug report to help us improve the module.
-title: ''
-labels: 'bug'
-assignees: ''
-
----
-
-<!-- **IMPORTANT!**
-Before reporting a bug, please make sure that you have read through our and the TailwindCSS documentation and you think your problem is indeed an issue related to our module. -->
-
-### Version
-@nuxtjs/tailwindcss: <!-- ex: v1.1.0 -->
-nuxt: <!-- ex: v2.12.0 -->
-
-### Reproduction Link
-<!-- A minimal test case based on a fork of https://codesandbox.io/s/o4vn5pvp7q or a GitHub repository that can reproduce the bug. -->
-
-### Steps to reproduce
-
-
-### What is Expected?
-
-
-### What is actually happening?
diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
new file mode 100644
index 00000000..08a3db95
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -0,0 +1,38 @@
+name: "\U0001F41E Bug report"
+description: Report a bug report to help us improve the module
+labels: ["bug"]
+body:
+  - type: textarea
+    id: bug-env
+    attributes:
+      label: Environment
+      description: Use `npx nuxi info` to fill this section.
+      placeholder: Environment
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Reproduction
+      description: A link to a repo that can reproduce the problem you ran into, or over a web container like Stackblitz using [our template](https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/basic-usage).
+      placeholder: Reproduction
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is.
+      placeholder: Bug description
+    validations:
+      required: true
+  - type: textarea
+    id: additonal
+    attributes:
+      label: Additional context
+      description: If applicable, add any other context about the problem here.
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: |
+        Optional if provided reproduction. Please try not to insert an image but copy paste the log text.
+      render: shell-script
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 1224ebc2..f7386da7 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,5 +1,17 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Nuxt Community Discord
-    url: https://discord.nuxtjs.org/
-    about: Consider asking questions about the module here.
+  - name: 📚 Nuxt Documentation
+    url: https://nuxt.com/docs
+    about: Check the documentation for usage of Nuxt
+  - name: 💬 Nuxt Discussions
+    url: https://github.com/nuxt/nuxt/discussions
+    about: Check if there is anything related to your issue on Nuxt discussions
+  - name: 📚 Tailwind CSS Documentation
+    url: https://tailwindcss.com/docs
+    about: Check the documentation for usage of Tailwind CSS
+  - name: 💬 Tailwind CSS GitHub
+    url: https://github.com/tailwindlabs/tailwindcss
+    about: Check if there is anything related to your issue on the Tailwind CSS repository
+  - name: 👥 Nuxt Discord Server
+    url: https://chat.nuxt.dev/
+    about: Consider asking questions about the module here
diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md
deleted file mode 100644
index f6a5b872..00000000
--- a/.github/ISSUE_TEMPLATE/feature-request.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea or enhancement for the module.
-title: ''
-labels: 'enhancement'
-assignees: ''
-
----
-
-### Is your feature request related to a problem? Please describe.
-<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
-
-### Describe the solution you'd like
-<!-- A clear and concise description of what you want to happen. -->
-
-### Describe alternatives you've considered
-<!-- A clear and concise description of any alternative solutions or features you've considered. -->
-
-### Additional context
-<!-- Add any other context or screenshots about the feature request here. -->
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml
new file mode 100644
index 00000000..7664fcda
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
@@ -0,0 +1,20 @@
+name: "🚀 Feature request"
+description: Suggest an idea or enhancement for the module
+labels: ["enhancement"]
+body:
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Describe the feature
+      description: A clear and concise description of what you think would be a helpful addition to the module, including the possible use cases and alternatives you have considered. If you have a working prototype or module that implements it, please include a link.
+      placeholder: Feature description
+    validations:
+      required: true
+  - type: checkboxes
+    id: additional-info
+    attributes:
+      label: Additional information
+      description: Additional information that helps us decide how to proceed.
+      options:
+        - label: Would you be willing to help implement this feature?
+        - label: Could this feature be implemented as a module?
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
index 6cd9b136..5bf88371 100644
--- a/.github/ISSUE_TEMPLATE/question.md
+++ b/.github/ISSUE_TEMPLATE/question.md
@@ -1,6 +1,6 @@
 ---
-name: Question
-about: Ask a question about the module.
+name: ❓ Question
+about: Ask a question about the module
 title: ''
 labels: 'question'
 assignees: ''
@@ -8,9 +8,7 @@ assignees: ''
 ---
 
 <!-- **IMPORTANT!**
-Please make sure to look for an answer to your question in our documentation and the Tailwindcss documentation before asking a question here.
+Please make sure to look for an answer to your question in our documentation and the Tailwind CSS documentation before asking a question here.
 
-If you have a general question regarding Nuxt-Tailwindcss use Discord `modules` channel. Thanks!
-
-Nuxt Discord: https://discord.nuxtjs.org/
+If you have a general question regarding this module, use the Discord server: https://chat.nuxt.dev/
 -->
diff --git a/docs/components/TailwindText.vue b/docs/components/TailwindText.vue
index ec338a60..fbc4c168 100644
--- a/docs/components/TailwindText.vue
+++ b/docs/components/TailwindText.vue
@@ -1,7 +1,7 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377.44 55.32">
     <path
-      fill="#38bdf8"
+      fill="currentColor"
       d="M24.12,24.87H14.89V42.73c0,4.77,3.13,4.69,9.23,4.4v7.22C11.76,55.84,6.85,52.41,6.85,42.73V24.87H0V17.12H6.85v-10l8-2.38V17.12h9.23Zm35.19-7.75h8V54.35h-8V49c-2.83,3.94-7.22,6.33-13,6.33-10.12,0-18.53-8.57-18.53-19.58s8.41-19.58,18.54-19.58c5.8,0,10.2,2.38,13,6.25ZM47.55,47.65A11.5,11.5,0,0,0,59.31,35.74,11.5,11.5,0,0,0,47.55,23.83,11.5,11.5,0,0,0,35.79,35.74,11.5,11.5,0,0,0,47.55,47.65ZM80.76,11.54A5.2,5.2,0,0,1,75.62,6.4a5.14,5.14,0,1,1,10.27,0A5.19,5.19,0,0,1,80.76,11.54Zm-4,42.81V17.12h8V54.35Zm17.34,0V0h8V54.35Zm60.23-37.23h8.49L151.11,54.35h-7.89l-7.75-25.09-7.81,25.09h-7.89L108.08,17.12h8.49l7.22,25.69,7.81-25.69h7.67L147,42.81Zm18.47-5.58a5.2,5.2,0,0,1-5.14-5.14,5.14,5.14,0,1,1,10.27,0A5.19,5.19,0,0,1,172.78,11.54Zm-4,42.81V17.12h8V54.35Zm36.92-38.2c8.34,0,14.3,5.66,14.3,15.34V54.35h-8v-22c0-5.66-3.28-8.63-8.34-8.63-5.29,0-9.46,3.12-9.46,10.72v20h-8V17.12h8v4.77c2.46-3.87,6.48-5.74,11.54-5.74ZM258.1,2.23h8V54.35h-8V49c-2.83,3.94-7.23,6.33-13,6.33-10.13,0-18.54-8.57-18.54-19.58s8.41-19.58,18.54-19.58c5.8,0,10.2,2.38,13,6.25ZM246.33,47.65a11.5,11.5,0,0,0,11.76-11.91,11.76,11.76,0,1,0-23.52,0A11.5,11.5,0,0,0,246.33,47.65Zm46.76,7.67a19.26,19.26,0,0,1-19.66-19.58,19.2,19.2,0,0,1,19.66-19.58,18.39,18.39,0,0,1,16.6,9.6l-6.93,4c-1.63-3.5-5.28-5.73-9.75-5.73a11.36,11.36,0,0,0-11.54,11.69A11.35,11.35,0,0,0,293,47.42a10.9,10.9,0,0,0,9.9-5.73l6.93,4a18.73,18.73,0,0,1-16.75,9.68Zm30-27.92c0,6.77,20,2.68,20,16.45,0,7.45-6.48,11.47-14.52,11.47-7.45,0-12.81-3.35-15.19-8.71l6.92-4c1.2,3.35,4.17,5.36,8.27,5.36,3.57,0,6.33-1.19,6.33-4.17,0-6.63-20-2.91-20-16.23,0-7,6-11.39,13.62-11.39,6.11,0,11.17,2.83,13.78,7.74l-6.78,3.8a7.25,7.25,0,0,0-7-4.25c-2.9,0-5.43,1.27-5.43,3.95Zm34.32,0c0,6.77,20,2.68,20,16.45,0,7.45-6.48,11.47-14.52,11.47-7.45,0-12.81-3.35-15.19-8.71l6.92-4c1.2,3.35,4.17,5.36,8.27,5.36,3.57,0,6.33-1.19,6.33-4.17,0-6.63-20-2.91-20-16.23,0-7,6-11.39,13.62-11.39C369,16.16,374,19,376.62,23.9l-6.78,3.8a7.24,7.24,0,0,0-7-4.25c-2.91,0-5.44,1.27-5.44,3.95Z"
     />
   </svg>
diff --git a/docs/content/3.examples/1.basic.md b/docs/content/3.examples/1.basic.md
index 90d4c96d..b689f2f9 100644
--- a/docs/content/3.examples/1.basic.md
+++ b/docs/content/3.examples/1.basic.md
@@ -1,9 +1,9 @@
 ---
 title: Basic Usage
-description: Live example of basic usage of Nuxt and Tailwind CSS.
+description: Example usage of the module.
 toc: false
 ---
 
-Here is a minimal example of a Nuxt project using the Tailwind CSS module.
+This is a minimal example of a Nuxt project using the Tailwind CSS module.
 
-:sandbox{src="https://stackblitz.com/edit/nuxt-tailwindcss-starter?embed=1&file=pages%2Findex.vue"}
+:sandbox{src="https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/basic-usage"}
diff --git a/docs/content/3.examples/2.dark-mode.md b/docs/content/3.examples/2.dark-mode.md
index 0cef1b99..0a690bc3 100644
--- a/docs/content/3.examples/2.dark-mode.md
+++ b/docs/content/3.examples/2.dark-mode.md
@@ -1,22 +1,10 @@
 ---
 title: Dark Mode
-description: Live example of dark mode with Nuxt Tailwind.
+description: Example of enabling dark mode with the module.
 toc: false
 ---
 
-This is an example using the [Tailwind Dark Mode](https://tailwindcss.com/docs/dark-mode) and [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module.
-
-To make it work hand-in-hand, you need to update your `tailwind.config` by adding the following: 
-
-```ts [tailwind.config.ts]
-import type { Config } from 'tailwindcss'
-
-export default <Partial<Config>>{
-  darkMode: 'class'
-}
-```
-
-And, add the `classSuffix` to the colorMode module options:
+This is an example using the [Tailwind Dark Mode](https://tailwindcss.com/docs/dark-mode) with the help of [`@nuxtjs/color-mode`](https://github.com/nuxt-modules/color-mode) module.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -24,12 +12,9 @@ export default defineNuxtConfig({
     '@nuxtjs/tailwindcss',
     '@nuxtjs/color-mode'
   ],
-  colorMode: {
-    classSuffix: ''
-  }
 })
 ```
 
 See the working demo below:
 
-:sandbox{src="https://stackblitz.com/edit/nuxt-tailwindcss-color-mode?embed=1&file=app.vue"}
+:sandbox{src="https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/dark-mode"}
diff --git a/docs/content/3.examples/3.content.md b/docs/content/3.examples/3.content.md
new file mode 100644
index 00000000..181d8f2e
--- /dev/null
+++ b/docs/content/3.examples/3.content.md
@@ -0,0 +1,18 @@
+---
+title: Nuxt Content
+description: Discover how powerful it is to use Tailwind CSS with Markdown files.
+---
+
+The module is extended by [`@nuxt/content`](https://content.nuxt.com/), meaning you can use Tailwind classes inside your content files with MDC syntax!
+
+```md
+Hello, this is a [Markdown]{.px-1 .bg-blue-200 .rounded-lg} file!
+
+::div{.w-full .bg-green-200 .p-4}
+Another way to use it!
+::
+```
+
+Learn more about the [Span Syntax](https://content.nuxt.com/usage/markdown#span-text) and how to use classes in Markdown files!
+
+:sandbox{src="https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/nuxt-content"}
diff --git a/docs/content/3.examples/3.nuxt-ui.md b/docs/content/3.examples/3.nuxt-ui.md
deleted file mode 100644
index 582403fe..00000000
--- a/docs/content/3.examples/3.nuxt-ui.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Nuxt UI
-description: Live example of Nuxt UI with Nuxt Tailwind.
-toc: false
----
-
-Checkout [Nuxt UI](https://ui.nuxt.com) documentation.
-
-:sandbox{src="https://stackblitz.com/edit/nuxt-nuxtlabs-ui?embed=1&file=pages%2Findex.vue"}
diff --git a/docs/content/3.examples/4.postcss-plugin.md b/docs/content/3.examples/4.postcss-plugin.md
deleted file mode 100644
index f0c6c052..00000000
--- a/docs/content/3.examples/4.postcss-plugin.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: PostCSS Plugins
-description: Live example of Nuxt Tailwind using the postcss-color-gray plugin.
-toc: false
----
-
-<!-- TODO: Replace with another postcss plugin as tailwind supports gray colors natively. -->
-<!-- TODO: update the link to relevant Nuxt 3 documentation -->
-
-Example with [postcss-color-gray](https://github.com/postcss/postcss-color-gray) plugin. See [how to add PostCSS plugins](https://nuxtjs.org/faq/postcss-plugins/) in Nuxt.
-
-:sandbox{src="https://codesandbox.io/embed/postcss-plugin-with-nuxt-tailwind-gyfo8" class="h-[600px]"}
diff --git a/docs/content/3.examples/4.tailwind-plugins.md b/docs/content/3.examples/4.tailwind-plugins.md
new file mode 100644
index 00000000..42a0c5a0
--- /dev/null
+++ b/docs/content/3.examples/4.tailwind-plugins.md
@@ -0,0 +1,8 @@
+---
+title: Tailwind Plugins
+description: Example of using Tailwind plugins.
+---
+
+In this example, we add the [`tailwindcss-icons`](https://github.com/egoist/tailwindcss-icons) plugin.
+
+:sandbox{src="https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/tailwind-plugins"}
diff --git a/docs/content/3.examples/5.daisyui.md b/docs/content/3.examples/5.daisyui.md
deleted file mode 100644
index dff29f14..00000000
--- a/docs/content/3.examples/5.daisyui.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: DaisyUI
-description: Live example of Nuxt Tailwind with daisyUI and color mode.
-toc: false
----
-
-Example with [daisyUI](https://daisyui.com/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/).
-
-Note that the preview may not work, you can open the sandbox on https://stackblitz.com/edit/nuxt-color-mode-daisyui-snrnt9?file=app.vue
-
-:sandbox{src="https://stackblitz.com/edit/nuxt-color-mode-daisyui-snrnt9?embed=1&file=app.vue" class="h-[600px]"}
diff --git a/docs/content/3.examples/5.postcss-config.md b/docs/content/3.examples/5.postcss-config.md
new file mode 100644
index 00000000..b306c9d5
--- /dev/null
+++ b/docs/content/3.examples/5.postcss-config.md
@@ -0,0 +1,13 @@
+---
+title: PostCSS Configuration
+description: Example of customising PostCSS options for Nuxt.
+toc: false
+---
+
+<!-- TODO: Replace with another postcss plugin as tailwind supports gray colors natively. -->
+
+In this example, we add [`postcss-color-gray`](https://github.com/postcss/postcss-color-gray) as a PostCSS plugin.
+
+See [`postcss`](https://nuxt.com/docs/api/nuxt-config#postcss) options in Nuxt.
+
+:sandbox{src="https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/postcss-config"}
diff --git a/docs/content/3.examples/6.daisyui.md b/docs/content/3.examples/6.daisyui.md
new file mode 100644
index 00000000..65876326
--- /dev/null
+++ b/docs/content/3.examples/6.daisyui.md
@@ -0,0 +1,9 @@
+---
+title: DaisyUI
+description: Example of using the module with daisyUI and color mode.
+toc: false
+---
+
+Example with [daisyUI](https://daisyui.com/) and [`@nuxtjs/color-mode`](https://color-mode.nuxtjs.org/).
+
+:sandbox{src="https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/daisyui"}
diff --git a/docs/content/3.examples/6.flowbite.md b/docs/content/3.examples/6.flowbite.md
deleted file mode 100644
index 4b7539cf..00000000
--- a/docs/content/3.examples/6.flowbite.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Flowbite
-description: Example of Nuxt Tailwind with Flowbite.
----
-
-[Flowbite](https://flowbite.com) is a set of open source components on top of Tailwind CSS.
-
-:sandbox{src="https://stackblitz.com/edit/github-hgjcuv?embed=1&file=app.vue" class="h-[600px]"}
diff --git a/docs/content/3.examples/7.flowbite.md b/docs/content/3.examples/7.flowbite.md
new file mode 100644
index 00000000..c3873662
--- /dev/null
+++ b/docs/content/3.examples/7.flowbite.md
@@ -0,0 +1,8 @@
+---
+title: Flowbite
+description: Example of usage with Flowbite.
+---
+
+[Flowbite](https://flowbite.com) is a set of open source components on top of Tailwind CSS.
+
+:sandbox{src="https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/flowbite"}
diff --git a/docs/content/3.examples/7.tailwind-icons.md b/docs/content/3.examples/7.tailwind-icons.md
deleted file mode 100644
index 5fbe7f81..00000000
--- a/docs/content/3.examples/7.tailwind-icons.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Tailwind Icons
-description: Example of using the tailwindcss-icons plugin.
----
-
-Checkout [tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) documentation.
-
-:sandbox{src="https://stackblitz.com/edit/nuxt-tailwindcss-icons?embed=1&file=app.vue" class="h-[600px]"}
diff --git a/docs/content/3.examples/8.content.md b/docs/content/3.examples/8.content.md
deleted file mode 100644
index 53c7139f..00000000
--- a/docs/content/3.examples/8.content.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Nuxt Content
-description: Discover how powerful it is to use TailwindCSS with Markdown files.
----
-
-The module supports [@nuxt/content](https://content.nuxtjs.org), meaning you can use Tailwind classes inside your content files with MDC syntax!
-
-```md
-Hello, this is a [Markdown]{.px-1 .bg-blue-200 .rounded-lg} file!
-
-::div{.w-full .bg-green-200 .p-4}
-Another way to use it!
-::
-```
-
-Learn more about the [Span Syntax](https://content.nuxtjs.org/guide/writing/mdc#span-text) and how to use classes in Markdown files!
diff --git a/docs/content/3.examples/8.nuxt-ui.md b/docs/content/3.examples/8.nuxt-ui.md
new file mode 100644
index 00000000..57df64ec
--- /dev/null
+++ b/docs/content/3.examples/8.nuxt-ui.md
@@ -0,0 +1,9 @@
+---
+title: Nuxt UI
+description: Example of Nuxt UI.
+toc: false
+---
+
+Checkout [Nuxt UI](https://ui.nuxt.com) documentation.
+
+:sandbox{src="https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/nuxtui"}