CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [6.0.0](https://github.com/nuxt-community/tailwindcss-module/compare/v5.3.5...v6.0.0) (2022-10-19)
+
+
+### ⚠ BREAKING CHANGES
+
+* update viewer dev middleware to be compatible with `h3@0.8` (#545)
+
+### Features
+
+* expose config as commonjs file ([#535](https://github.com/nuxt-community/tailwindcss-module/issues/535)) ([af87449](https://github.com/nuxt-community/tailwindcss-module/commit/af8744972ba2409fd6a468829addb963824168e5))
+* update viewer dev middleware to be compatible with `h3@0.8` ([#545](https://github.com/nuxt-community/tailwindcss-module/issues/545)) ([0b1844e](https://github.com/nuxt-community/tailwindcss-module/commit/0b1844efec4ed594d852938f6091178a5401f7d9))
+
 ### [5.3.5](https://github.com/nuxt-community/tailwindcss-module/compare/v5.3.4...v5.3.5) (2022-10-07)
 
 

docs/content/1.getting-started/1.setup.md

@@ -21,11 +21,19 @@ npm install --save-dev @nuxtjs/tailwindcss
 
 2. Add it to your `modules` section in your `nuxt.config`:
 
-```ts [nuxt.config]
+::code-group
+```ts [nuxt.config (Nuxt 3)]
+export default defineNuxtConfig{
+  modules: ['@nuxtjs/tailwindcss']
+}
+```
+
+```ts [nuxt.config (Nuxt 2)]
 export default {
   modules: ['@nuxtjs/tailwindcss']
 }
 ```
+::
 
 3. Create your `tailwind.config.js` by running:
 
@@ -60,6 +68,13 @@ You can configure the paths in the [module options](/getting-started/options).
 
 ::
 
+If you're going to create your own Tailwind CSS file, make sure to add the  `@tailwind` directives for each of Tailwind’s layers.
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
 Learn more about overwriting the Tailwind configuration in the [Tailwind Config](/tailwind/config) section.
 
 ## TypeScript (optional)

docs/content/2.tailwind/3.editor-support.md

@@ -7,27 +7,31 @@ Tailwind provides an [extension for Visual Studio Code](https://github.com/tailw
 
 There are a few things you need to keep in mind so that the extension works correctly:
 
-1. You need to have a `tailwind.config.js` file in the root of your project, so that the extension gets enabled. You can create the file using `npx tailwindcss init`. The file can have another name, such as `tailwind.config.cjs` in which case you have to configure the extension so that it picks up the new name:
+1. In case you specify your Tailwind configuration in a `tailwind.config.js` file in the root of your project, the extension gets enabled and should pick up this configuration automatically. You can create the file using `npx tailwindcss init`. The file can have another name, such as `tailwind.config.cjs` in which case you have to configure the extension so that it picks up the new name:
 
-```json [.vscode/settings.json]
-"tailwindCSS.experimental.configFile": "tailwind.config.cjs"
-```
+    ```json [.vscode/settings.json]
+    "tailwindCSS.experimental.configFile": "tailwind.config.cjs"
+    ```
 
-If you have multiple Tailwind config files, you can use the array syntax:
+    If you have multiple Tailwind config files, you can use the array syntax:
 
-```json [.vscode/settings.json]
-"tailwindCSS.experimental.configFile": {
-  "themes/simple/tailwind.config.js": "themes/simple/**",
-  "themes/neon/tailwind.config.js": "themes/neon/**"
-}
-```
+    ```json [.vscode/settings.json]
+    "tailwindCSS.experimental.configFile": {
+      "themes/simple/tailwind.config.js": "themes/simple/**",
+      "themes/neon/tailwind.config.js": "themes/neon/**"
+    }
+    ```
 
-2. The tailwind configuration file must not have any TypeScript or ESM syntax in the file. That means that you have to use CommonJS exports and can't use a `tailwind.config.ts` file with TypeScript syntax. See https://github.com/tailwindlabs/tailwindcss-intellisense/issues/348#issuecomment-1111313685.
+2. Currently, [Tailwind does not support a configuration file in TypeScript or ESM syntax format]( https://github.com/tailwindlabs/tailwindcss-intellisense/issues/348#issuecomment-1111313685), nor does it pick up the Tailwind configuration in `nuxt.config.ts`. If you prefer one of these options to specify the configuration, you have to point the extension to the configuration file in CommonJS format that the module automatically generates in the `.nuxt` folder: 
+
+    ```json [.vscode/settings.json]
+    "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs"
+    ```
 
 3. Add the following configuration to your `.vscode/settings.json` file, so that Tailwind directives have proper autocomplete, syntax highlighting, and linting:
 
-```json [.vscode/settings.json]
-"files.associations": {
-	"*.css": "tailwindcss"
-}
-```
+    ```json [.vscode/settings.json]
+    "files.associations": {
+	    "*.css": "tailwindcss"
+    }
+    ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/tailwindcss",
-  "version": "5.3.5",
+  "version": "6.0.0",
   "description": "TailwindCSS module for Nuxt",
   "repository": "nuxt-community/tailwindcss-module",
   "license": "MIT",
@@ -26,13 +26,14 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0-rc.9",
+    "@nuxt/kit": "^3.0.0-rc.12",
     "@nuxt/postcss8": "^1.1.3",
     "autoprefixer": "^10.4.8",
     "chalk": "^5.0.1",
     "clear-module": "^4.1.2",
     "consola": "^2.15.3",
     "defu": "^6.1.0",
+    "h3": "^0.8.1",
     "postcss": "^8.4.16",
     "postcss-custom-properties": "^12.1.8",
     "postcss-nesting": "^10.1.10",
@@ -44,12 +45,12 @@
     "@fontsource/inter": "^4.5.12",
     "@nuxt/content": "^2.1.0",
     "@nuxt/module-builder": "latest",
-    "@nuxt/test-utils": "^3.0.0-rc.9",
+    "@nuxt/test-utils": "^3.0.0-rc.12",
     "@nuxtjs/eslint-config-typescript": "latest",
     "codecov": "latest",
     "eslint": "latest",
     "jsdom": "^20.0.0",
-    "nuxt": "^3.0.0-rc.9",
+    "nuxt": "^3.0.0-rc.12",
     "standard-version": "latest",
     "vitest": "^0.23.1"
   }

src/module.ts

@@ -15,6 +15,7 @@ import {
   isNuxt3, findPath, requireModule
 } from '@nuxt/kit'
 import { Config } from 'tailwindcss'
+import { eventHandler, sendRedirect } from 'h3'
 import { name, version } from '../package.json'
 import vitePlugin from './hmr'
 import defaultTailwindConfig from './tailwind.config'
@@ -134,11 +135,18 @@ export default defineNuxtModule<ModuleOptions>({
     // Merge with our default purgecss default
     tailwindConfig = defuArrayFn(tailwindConfig, moduleOptions.config)
 
+    // Write cjs version of config to support vscode extension
+    const resolveConfig: any = await import('tailwindcss/resolveConfig.js').then(r => r.default || r)
+    const resolvedConfig = resolveConfig(tailwindConfig)
+    addTemplate({
+      filename: 'tailwind.config.cjs',
+      getContents: () => `module.export = ${JSON.stringify(resolvedConfig, null, 2)}`,
+      write: true
+    })
+
     // Expose resolved tailwind config as an alias
     // https://tailwindcss.com/docs/configuration/#referencing-in-javascript
     if (moduleOptions.exposeConfig) {
-      const resolveConfig: any = await import('tailwindcss/resolveConfig.js').then(r => r.default || r)
-      const resolvedConfig = resolveConfig(tailwindConfig)
       const template = addTemplate({
         filename: 'tailwind.config.mjs',
         getContents: () => `export default ${JSON.stringify(resolvedConfig, null, 2)}`
@@ -231,13 +239,12 @@ export default defineNuxtModule<ModuleOptions>({
       const { withTrailingSlash, withoutTrailingSlash } = await import('ufo')
       const routerPrefix = isNuxt3() ? route : undefined
       const _viewerDevMiddleware = createServer({ tailwindConfigProvider: () => tailwindConfig, routerPrefix }).asMiddleware()
-      const viewerDevMiddleware = (req, res) => {
-        if (req.originalUrl === withoutTrailingSlash(route)) {
-          res.writeHead(301, { Location: withTrailingSlash(req.originalUrl) })
-          return res.end()
+      const viewerDevMiddleware = eventHandler((event) => {
+        if (event.req.url === withoutTrailingSlash(route)) {
+          return sendRedirect(event, withTrailingSlash(event.req.url), 301)
         }
-        _viewerDevMiddleware(req, res)
-      }
+        _viewerDevMiddleware(event.req, event.res)
+      })
       if (isNuxt3()) { addDevServerHandler({ route, handler: viewerDevMiddleware }) }
       if (isNuxt2()) { nuxt.options.serverMiddleware.push({ route, handler: viewerDevMiddleware }) }
       nuxt.hook('listen', (_, listener) => {