feat: extends support

docs/content/2.tailwind/1.config.md

@@ -28,6 +28,7 @@ You can learn more about the [Tailwind configuration](https://tailwindcss.com/do
 ## Overwriting the configuration
 
 You can extend the default configuration:
+
 - with a [tailwind.config.js](#tailwindconfigjs) file
 - using the [config option](#config-option)
 - with the `tailwindcss:config` Nuxt hook
@@ -89,7 +90,6 @@ This config has less priority over the [tailwind.config.js](#tailwindconfigjs) f
 
 ::
 
-
 ### `tailwindcss:config` hook
 
 ::alert{type="warning"}
@@ -188,7 +188,6 @@ module.exports = {
 }
 ```
 
-
 ## Referencing in the application
 
 It can often be useful to reference Tailwind configuration values at runtime, e.g. to access some of your theme values when dynamically applying inline styles in a component.

docs/content/3.examples/6.content.md

@@ -0,0 +1,16 @@
+---
+title: '@nuxt/content'
+description: 'Discover how powerful it is to use TailwindCSS in @nuxt/content 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!

package.json

@@ -48,6 +48,7 @@
     "codecov": "latest",
     "eslint": "latest",
     "nuxt": "npm:nuxt3@latest",
+    "@nuxt/content": "npm:@nuxt/content-edge@latest",
     "standard-version": "latest"
   }
 }

playground/content/content-test.md

@@ -0,0 +1,13 @@
+::div{.my-4}
+[@nuxt/content support]{.px-4 .text-xl .font-bold}
+::
+
+---
+
+::div{.my-4 .px-4}
+Hello World! :wave:
+
+This is an integration test with [@nuxt/content](https://content.nuxtjs.org){.font-bold .hover:text-blue-500}! :smile:
+
+It feels pretty smooth!
+::

playground/nuxt.config.ts

@@ -1,13 +1,17 @@
 import { defineNuxtConfig } from 'nuxt'
-import tailwindModule from '..'
+import tailwindModule from '../src/module'
 
 export default defineNuxtConfig({
-  buildModules: [
-    tailwindModule
+  modules: [
+    tailwindModule,
+    '@nuxt/content'
   ],
   tailwindcss: {
     exposeConfig: true
   },
+  content: {
+    documentDriven: true
+  },
   css: [
     // Including Inter CSS is the first component to reproduce HMR issue. It also causes playground to look better,
     // since Inter is a native font for Tailwind UI

src/hmr.ts

@@ -2,8 +2,8 @@ import { isAbsolute, resolve } from 'path'
 import { HmrContext, Plugin } from 'vite'
 import minimatch from 'minimatch'
 
-export default function (tailwindConfig, rootDir: string, cssPath: string): Plugin {
-  const resolvedContent: string[] = tailwindConfig.content.map(f => !isAbsolute(f) ? resolve(rootDir, f) : f)
+export default function (tailwindConfig: any = {}, rootDir: string, cssPath: string): Plugin {
+  const resolvedContent: string[] = (tailwindConfig.content || []).map(f => !isAbsolute(f) ? resolve(rootDir, f) : f)
 
   return {
     name: 'nuxt:tailwindcss',

src/module.ts

@@ -37,7 +37,8 @@ export default defineNuxtModule({
     viewer: true,
     exposeConfig: false,
     injectPosition: 0,
-    disableHmrHotfix: false
+    disableHmrHotfix: false,
+    disableContentSupport: false
   }),
   async setup (moduleOptions, nuxt) {
     const configPath = await resolvePath(moduleOptions.configPath)
@@ -100,7 +101,9 @@ export default defineNuxtModule({
 
     // Allow extending tailwindcss config by other modules
     // @ts-ignore
-    await nuxt.callHook('tailwindcss:config', tailwindConfig)
+    const _tailwindConfig = await nuxt.callHook('tailwindcss:config', tailwindConfig)
+    // Overwrite if returned
+    if (_tailwindConfig) { tailwindConfig = _tailwindConfig }
 
     // Compute tailwindConfig hash
     tailwindConfig._hash = String(Date.now())
@@ -120,6 +123,12 @@ export default defineNuxtModule({
       await installModule('@nuxt/postcss8')
     }
 
+    // Add support for @nuxt/content if module is present
+    if (!moduleOptions.disableContentSupport && (nuxt.options.modules.includes('@nuxt/content') || nuxt.options.modules.includes('@nuxt/content-edge'))) {
+      tailwindConfig.content = tailwindConfig.content ?? []
+      tailwindConfig.content.push(`${nuxt.options.buildDir}/cache/content/parsed/**/*.md`)
+    }
+
     if (nuxt.options.dev && !moduleOptions.disableHmrHotfix) {
       // Insert Vite plugin to work around HMR issue
       addVitePlugin(vitePlugin(tailwindConfig, nuxt.options.rootDir, resolvedCss))