CHANGELOG.md

@@ -2,12 +2,15 @@
 
 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.1](https://github.com/nuxt-community/tailwindcss-module/compare/v6.0.0...v6.0.1) (2022-10-19)
+
 ## [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)
+* You can no longer use CJS syntax (`module.exports`) in your `tailwind.config.js` (#549)
 
 ### Features
 

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

@@ -35,12 +35,6 @@ export default {
 ```
 ::
 
-3. Create your `tailwind.config.js` by running:
-
-```bash
-npx tailwindcss init
-```
-
 ::alert{type="success"}
 
 That's it! You can now use Tailwind classes in your Nuxt app ✨
@@ -58,7 +52,7 @@ Discover your color palette based on your Tailwind config with the [Tailwind vie
 When running `nuxt dev`, this module will look for these files:
 
 - `./assets/css/tailwind.css`
-- `./tailwind.config.{js,ts}`
+- `./tailwind.config.{js,cjs,mjs,ts}`
 
 If they don't exist, the module will inject a basic configuration for each one so you don't have to create these files.
 
@@ -77,22 +71,6 @@ If you're going to create your own Tailwind CSS file, make sure to add the  `@ta
 
 Learn more about overwriting the Tailwind configuration in the [Tailwind Config](/tailwind/config) section.
 
-## TypeScript (optional)
-
-Officially Tailwind config files are plain JavaScript, however with this module, you can optionally use a TypeScript file for your config.
-
-To do so, rename `tailwind.config.js` to `tailwind.config.ts` and use the types from the tailwindcss module.
-
-```ts [tailwind.config.ts]
-import { Config } from 'tailwindcss'
-
-export default <Config> {
-  theme: {
-    extend: {}
-  },
-}
-```
-
 ## Options
 
 You can customize the module's behavior by using the `tailwindcss` property in `nuxt.config`:

docs/content/1.getting-started/2.options.md

@@ -8,7 +8,7 @@ export default {
   // Defaults options
   tailwindcss: {
     cssPath: '~/assets/css/tailwind.css',
-    configPath: 'tailwind.config.js',
+    configPath: 'tailwind.config',
     exposeConfig: false,
     config: {},
     injectPosition: 0,
@@ -35,9 +35,9 @@ This file will be directly injected as a [global CSS](https://v3.nuxtjs.org/api/
 
 ## `configPath`
 
-- Default: `'tailwind.config.js'`
+- Default: `'tailwind.config'`
 
-Define the path of the Tailwind configuration file.
+Define the path of the Tailwind configuration file. The extension can be omitted, in which case it will try to find a `.js`, `.cjs`, `.mjs`, or `.ts` file.
 
 ```ts [nuxt.config]
 export default {
@@ -53,15 +53,9 @@ By default, this module preconfigures the Tailwind configuration to make it work
 
 ::
 
-You can create the default `tailwind.config.js` file by running:
-
-```bash
-npx tailwindcss init
-```
-
 ::alert{type="info"}
 
-If you customize the [`srcDir`](https://v3.nuxtjs.org/api/configuration/nuxt.config#srcdir) property in your `nuxt.config` file, you'll have to update the `configPath` value to `'~~/tailwind.config.js'` (`~~` is the alias for [`rootDir`](https://v3.nuxtjs.org/api/configuration/nuxt.config#rootdir)) for the `tailwind.config.js` to be recognized properly. Read more in the [Issue #114](https://github.com/nuxt-community/tailwindcss-module/issues/114#issuecomment-698885369).
+If you customize the [`srcDir`](https://v3.nuxtjs.org/api/configuration/nuxt.config#srcdir) property in your `nuxt.config` file, you'll have to update the `configPath` value to `'~~/tailwind.config'` (`~~` is the alias for [`rootDir`](https://v3.nuxtjs.org/api/configuration/nuxt.config#rootdir)) for the `tailwind.config` file to be recognized properly. Read more in the [Issue #114](https://github.com/nuxt-community/tailwindcss-module/issues/114#issuecomment-698885369).
 
 ::
 

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

@@ -10,38 +10,38 @@ description: This module comes with a default Tailwind configuration file to pro
   theme: {},
   plugins: [],
   content: [
-    `components/**/*.{vue,js}`,
-    `layouts/**/*.vue`,
-    `pages/**/*.vue`,
-    `composables/**/*.{js,ts}`,
-    `plugins/**/*.{js,ts}`,
-    `App.{js,ts,vue}`,
-    `app.{js,ts,vue}`
+    `${srcDir}/components/**/*.{vue,js,ts}`,
+    `${srcDir}/layouts/**/*.vue`,
+    `${srcDir}/pages/**/*.vue`,
+    `${srcDir}/composables/**/*.{js,ts}`,
+    `${srcDir}/plugins/**/*.{js,ts}`,
+    `${srcDir}/App.{js,ts,vue}`,
+    `${srcDir}/app.{js,ts,vue}`,
+    `${srcDir}/Error.{js,ts,vue}`,
+    `${srcDir}/error.{js,ts,vue}`
   ]
 }
 ```
 
-> The file is [available on GitHub](https://github.com/nuxt-community/tailwindcss-module/blob/main/src/tailwind.config.ts).
-
 You can learn more about the [Tailwind configuration](https://tailwindcss.com/docs/configuration) and the [content configuration](https://tailwindcss.com/docs/content-configuration) in Tailwind docs.
 
 ## Overwriting the configuration
 
 You can extend the default configuration:
 
-- with a [tailwind.config.js](#tailwindconfigjs) file
+- with a [tailwind.config](#tailwindconfig) file
 - using the [config option](#config-option)
 - with the `tailwindcss:config` Nuxt hook
 
 ::alert{type="warning"}
 
-The `tailwind.config.js` and `config` options are subject to the [merging strategy](#merging-strategy).
+The `tailwind.config` file and `config` options are subject to the [merging strategy](#merging-strategy).
 
 ::
 
-### `tailwind.config.js`
+### `tailwind.config`
 
-If a `tailwind.config.js` file is present, it will be imported and used to overwrite the default configuration.
+If a `tailwind.config` file is present, it will be imported and used to overwrite the default configuration. All of the following file extensions will work by default: `.js`, `.cjs`, `.mjs`, and `.ts`. When not using the `.cjs` file extension, you need to use ESM syntax (see #549).
 
 You can configure the path with the [configPath option](/getting-started/options#configpath).
 
@@ -51,7 +51,37 @@ This config has the highest priority to overwrite the defaults and [tailwindcss.
 
 ::
 
-```js{}[tailwind.config.js]
+::code-group
+```js [tailwind.config.js]
+import defaultTheme from 'tailwindcss/defaultTheme'
+
+export default {
+  theme: {
+    extend: {
+      colors: {
+        primary: defaultTheme.colors.green
+      }
+    }
+  }
+}
+```
+
+```ts{}[tailwind.config.ts]
+import type { Config } from 'tailwindcss'
+import defaultTheme from '@tailwindcss/defaultTheme'
+
+export default <Partial<Config>>{
+	theme: {
+    extend: {
+      colors: {
+        primary: defaultTheme.colors.green
+      }
+    }
+  }
+}
+```
+
+```js{}[tailwind.config.cjs]
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
@@ -65,6 +95,8 @@ module.exports = {
 }
 ```
 
+::
+
 Learn more about the [Tailwind config](https://tailwindcss.com/docs/configuration) in their docs.
 
 ### `config` option
@@ -126,7 +158,7 @@ When assigning an array to the `content` property, it will be concatenated with
 **Example**
 
 ```js{}[tailwind.config.js]
-module.exports = {
+export default {
   content: [
     'content/**/*.md'
   ]
@@ -137,35 +169,29 @@ The `content` option will be:
 
 ```js
 [
-  'components/**/*.vue',
+  'components/**/*.{vue,js,ts}',
   'layouts/**/*.vue',
   'pages/**/*.vue',
-  'plugins/**/*.js',
+  'composables/**/*.{js,ts}',
+  'plugins/**/*.{js,ts}',
+  'App.{js,ts,vue}',
+  'app.{js,ts,vue}',
+  'Error.{js,ts,vue}',
+  'error.{js,ts,vue}'
   'content/**/*.md'
 ]
 ```
 
 If you want to fully overwrite its value, you can use a `function` that receives the default value:
 
 ```js{}[tailwind.config.js]
-module.exports = {
+export default {
   content (contentDefaults) {
-    return contentDefaults.map(file => file.replace('.js', '.ts'))
+    return tailwindContent
   }
 }
 ```
 
-The `content` option will be:
-
-```js
-[
-  'components/**/*.vue',
-  'layouts/**/*.vue',
-  'pages/**/*.vue',
-  'plugins/**/*.ts'
-]
-```
-
 ::alert{type="info"}
 
 This merging strategy of with a function only applies to `plugins` and `content` since the default value is defined as an `Array`.

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

@@ -7,28 +7,13 @@ 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. 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"
-    ```
-
-    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/**"
-    }
-    ```
-
-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: 
+1. Currently, [Tailwind does not support a configuration file in TypeScript or ESM syntax format]( https://github.com/tailwindlabs/tailwindcss-intellisense/issues/348#issuecomment-1111313685). To workaround this limitation, and also include configuration from other places, the module automatically generates a configuration file in CommonJS format in the `.nuxt` folder. You need to change your VSCode settings to point to the generated config file.
 
     ```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:
+2. 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": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/tailwindcss",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "TailwindCSS module for Nuxt",
   "repository": "nuxt-community/tailwindcss-module",
   "license": "MIT",
@@ -28,30 +28,30 @@
   "dependencies": {
     "@nuxt/kit": "^3.0.0-rc.12",
     "@nuxt/postcss8": "^1.1.3",
-    "autoprefixer": "^10.4.8",
-    "chalk": "^5.0.1",
+    "autoprefixer": "^10.4.12",
+    "chalk": "^5.1.2",
     "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",
+    "h3": "^0.8.5",
+    "postcss": "^8.4.18",
+    "postcss-custom-properties": "^12.1.9",
+    "postcss-nesting": "^10.2.0",
     "tailwind-config-viewer": "^1.7.2",
-    "tailwindcss": "^3.1.8",
-    "ufo": "^0.8.5"
+    "tailwindcss": "^3.2.0",
+    "ufo": "^0.8.6"
   },
   "devDependencies": {
-    "@fontsource/inter": "^4.5.12",
-    "@nuxt/content": "^2.1.0",
+    "@fontsource/inter": "^4.5.14",
+    "@nuxt/content": "^2.2.0",
     "@nuxt/module-builder": "latest",
     "@nuxt/test-utils": "^3.0.0-rc.12",
     "@nuxtjs/eslint-config-typescript": "latest",
     "codecov": "latest",
     "eslint": "latest",
-    "jsdom": "^20.0.0",
+    "jsdom": "^20.0.1",
     "nuxt": "^3.0.0-rc.12",
     "standard-version": "latest",
-    "vitest": "^0.23.1"
+    "vitest": "^0.24.3"
   }
 }

src/module.ts

@@ -82,7 +82,7 @@ export default defineNuxtModule<ModuleOptions>({
       // filter in case an empty path is provided
       const paths = (Array.isArray(path) ? path : [path]).filter(Boolean)
       for (const path of paths) {
-        const resolvedPath = (await findPath(path, { extensions: ['.js', '.mjs', '.ts'] }, 'file'))
+        const resolvedPath = (await findPath(path, { extensions: ['.js', '.cjs', '.mjs', '.ts'] }, 'file'))
         // only if the path is found
         if (resolvedPath) {
           configPaths.push(resolvedPath)