docs: update examples, closes #841

.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

.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

.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?

.github/ISSUE_TEMPLATE/question.md

@@ -1,16 +1,14 @@
 ---
-name: Question
-about: Ask a question about the module.
+name: ❓ Question
+about: Ask a question about the module
 title: ''
 labels: 'question'
 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/
 -->

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>

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"}

docs/content/3.examples/2.dark-mode.md

@@ -1,35 +1,20 @@
 ---
 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({
   modules: [
     '@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"}

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"}

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"}

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"}

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"}

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"}

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"}