CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.
 
+### [5.0.4](https://github.com/nuxt-community/tailwindcss-module/compare/v5.0.3...v5.0.4) (2022-05-02)
+
+
+### Bug Fixes
+
+* add tailwindcss types ([#462](https://github.com/nuxt-community/tailwindcss-module/issues/462)) ([379c816](https://github.com/nuxt-community/tailwindcss-module/commit/379c816159af56a4e9c8a9760d3545dbb269d864))
+
 ### [5.0.3](https://github.com/nuxt-community/tailwindcss-module/compare/v5.0.2...v5.0.3) (2022-04-20)
 
 

docs/content/1.index.md

@@ -6,13 +6,13 @@ category: 'Getting started'
 
 > Add Tailwind CSS to your Nuxt application in seconds.
 
-This module help you setup [Tailwind CSS](https://tailwindcss.com) (version 3) to your [Nuxt](https://nuxtjs.org) application in seconds.
+This module helps you set up [Tailwind CSS](https://tailwindcss.com) (version 3) in your [Nuxt 3](https://v3.nuxtjs.org/) application in seconds.
 
 ## Features
 
-- 👌  Zero configuration to start *([see video](https://tailwindcss.nuxtjs.org/#quick-start))*
+- 👌  Zero configuration to start *([see video](#quick-start))*
 - 🪄  Includes [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) with [postcss-nesting](https://github.com/csstools/postcss-nesting)
-- 🎨  Discover your Tailwind Colors *([see video](https://tailwindcss.nuxtjs.org/#tailwind-colors))*
+- 🎨  Discover your Tailwind colors *([see video](#tailwind-colors))*
 - ⚙️  Reference your Tailwind config in your app
 - 📦  Extendable by [Nuxt modules](https://modules.nuxtjs.org/)
 

docs/content/2.setup.md

@@ -4,7 +4,7 @@ category: Getting started
 
 # Setup
 
-> Using TailwindCSS in your Nuxt project is only one command away ✨
+> Using Tailwind CSS in your Nuxt project is only one command away ✨
 
 
 ## Installation
@@ -28,15 +28,15 @@ category: Getting started
       </d-code-block>
     </d-code-group>
 
-2. Add it to your `buildModules` section in your `nuxt.config.js`:
+2. Add it to your `buildModules` section in your `nuxt.config`:
 
-    ```ts [nuxt.config.js]
+    ```ts [nuxt.config]
     export default {
-      modules: ['@nuxtjs/tailwindcss']
+      buildModules: ['@nuxtjs/tailwindcss']
     }
     ```
 
-3. Create your `tailwind.config.js` running:
+3. Create your `tailwind.config.js` by running:
 
     ```bash
     npx tailwindcss init
@@ -73,9 +73,9 @@ Learn more about overwriting the Tailwind configuration in the [Tailwind Config]
 
 ## Options
 
-You can customize the module behaviour by using the `tailwindcss` property in `nuxt.config.js`:
+You can customize the module's behavior by using the `tailwindcss` property in `nuxt.config`:
 
-```ts [nuxt.config.js]
+```ts [nuxt.config]
 export default {
   tailwindcss: {
     // Options

docs/content/3.options.md

@@ -4,10 +4,10 @@ category: Getting started
 
 # Options
 
-> Configure Nuxt Tailwind easily with the tailwindcss property.
+> Configure Nuxt Tailwind easily with the `tailwindcss` property.
 
 
-```ts [nuxt.config.js]
+```ts [nuxt.config]
 export default {
   // Defaults options
   tailwindcss: {
@@ -25,27 +25,35 @@ export default {
 
 - Default: `'~/assets/css/tailwind.css'`
 
-Define the path of the Tailwind CSS file, **if the file exists, it will be imported instead of the module's default.**.
+Define the path of the Tailwind CSS file. **If the file does not exist, the module's default CSS file will be imported instead.**
 
-```ts [nuxt.config.js]
+```ts [nuxt.config]
 export default {
   tailwindcss: {
     cssPath: '~/assets/tailwind.css'
   }
 }
 ```
 
-This file will be directly injected as a [global css](https://nuxtjs.org/guides/configuration-glossary/configuration-css) for Nuxt, it supports `css`, `sass`, `postcss`, and more.
+This file will be directly injected as a [global CSS](https://v3.nuxtjs.org/api/configuration/nuxt.config#css) for Nuxt. It supports `css`, `sass`, `postcss`, and more.
 
 ## `configPath`
 
 - Default: `'tailwind.config.js'`
 
-Define the path of the Tailwind configuration file, **if the file exists, it will be imported**.
+Define the path of the Tailwind configuration file.
+
+```ts [nuxt.config]
+export default {
+  tailwindcss: {
+    configPath: '~/config/tailwind.js'
+  }
+}
+```
 
 <d-alert type="info">
 
-By default, the module already configure the Tailwind configuration to works perfectly with Nuxt. Read more in the [Tailwind Config section](/tailwind/config).
+By default, this module preconfigures the Tailwind configuration to make it work perfectly with Nuxt. Read more in the [Tailwind Config section](/tailwind/config).
 
 </d-alert>
 
@@ -55,27 +63,19 @@ You can create the default `tailwind.config.js` file by running:
 npx tailwindcss init
 ```
 
-Example of overwriting the location of the config path:
-
-```ts [nuxt.config.js]
-export default {
-  tailwindcss: {
-    configPath: '~/config/tailwind.js'
-  }
-}
-```
-
 <d-alert type="info">
 
-If you customized the [`srcDir`](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-srcdir/) property, you'll have to update `configPath` as `configPath: '~~/tailwind.config.js'` (~~ is the alias for 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.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).
 
 </d-alert>
 
 ## `exposeConfig`
 
-If you need to resolve the tailwind config in runtime, you can enable exposeConfig option in nuxt.config:
+- Default: `false`
+
+If you need to resolve the tailwind config in runtime, you can enable the `exposeConfig` option:
 
-```ts [nuxt.config.js]
+```ts [nuxt.config]
 export default {
   tailwindcss: {
     exposeConfig: true
@@ -89,10 +89,9 @@ Learn more about it in the [Referencing in the application](/tailwind/config#ref
 
 - Default: `0`
 
-You can use any integer to adjust the position of the css insertion.
-The position of the [global css](https://nuxtjs.org/guides/configuration-glossary/configuration-css) injection, which affects the css priority.
+You can use any integer to adjust the position of the [global CSS](https://v3.nuxtjs.org/api/configuration/nuxt.config#css) injection, which affects the CSS priority.
 
-```ts [nuxt.config.js]
+```ts [nuxt.config]
 export default {
   tailwindcss: {
     injectPosition: 0 // equal to nuxt.options.css.unshift(cssPath)
@@ -107,9 +106,9 @@ Learn more about overwriting Tailwind config [here](/tailwind/config#overwriting
 
 - Default: [see tailwind config section](/tailwind/config)
 
-You can directly extend the Tailwind config with the `config` property, it uses [defu.fn](https://github.com/nuxt-contrib/defu#function-merger) to overwrites the defaults.
+You can directly extend the Tailwind config with the `config` property. It uses [defu.fn](https://github.com/nuxt-contrib/defu#function-merger) to overwrite the defaults.
 
-```ts [nuxt.config.js]
+```ts [nuxt.config]
 export default {
   tailwindcss: {
     config: {
@@ -127,19 +126,18 @@ Learn more about overwriting Tailwind config [here](/tailwind/config#overwriting
 ## `viewer`
 
 - Default: `true` in development
-- Version: <d-badge>v3.4+</d-badge>
 
 <d-alert type="info">
 
-The [Tailwind viewer](/tailwind/viewer) is only available in development with `nuxt dev`.
+The [Tailwind viewer](/tailwind/viewer) is only available during development (run with `nuxi dev` command).
 
 </d-alert>
 
-The module internally use [tailwind-config-viewer](https://github.com/rogden/tailwind-config-viewer) to setup the `/_tailwind/` route.
+This module internally uses [tailwind-config-viewer](https://github.com/rogden/tailwind-config-viewer) to set up the `/_tailwind/` route.
 
-To disable the viewer in development, set it to `false`:
+To disable the viewer during development, set its value to `false`:
 
-```ts [nuxt.config.js]
+```ts [nuxt.config]
 export default {
   tailwindcss: {
     viewer: false

docs/content/examples/1.basic.md

@@ -6,7 +6,7 @@ fullscreen: true
 
 # Basic Usage Example
 
-> Live example of basic usage of Nuxt Tailwind CSS on CodeSandbox.
+> Live example of basic usage of Nuxt Tailwind on CodeSandbox.
 
 Minimal example of a Nuxt project with Tailwind CSS module.
 

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

@@ -8,7 +8,7 @@ fullscreen: true
 <!-- TODO: Replace with tailwind's native dark mode support. -->
 # Dark Mode Example
 
-> Live example of dark mode with Nuxt Tailwind CSS on CodeSandbox.
+> Live example of dark mode with Nuxt Tailwind on CodeSandbox.
 
 Example with the [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) plugin and [@nuxtjs/color-mode](https://github.com/nuxt-community/color-mode-module) module.
 

docs/content/examples/3.tailwindui.md

@@ -7,7 +7,7 @@ fullscreen: true
 
 # Tailwind UI Example
 
-> Live example of Tailwind UI plugin with Nuxt on CodeSandbox.
+> Live example of Tailwind UI plugin with Nuxt Tailwind on CodeSandbox.
 
 Example with [Tailwind UI](https://tailwindui.com) plugin with the [Inter](https://rsms.me/inter/) font loaded by [@nuxtjs/google-fonts](https://github.com/nuxt-community/google-fonts-module) module.
 

docs/content/examples/4.postcss-plugin.md

@@ -8,8 +8,9 @@ fullscreen: true
 <!-- TODO: Replace with another postcss plugin as tailwind supports gray colors natively. -->
 # Example with PostCSS Plugins
 
-> Live example of Nuxt Tailwind with postcss-color-gray plugin
+> Live example of Nuxt Tailwind with [postcss-color-gray](https://github.com/postcss/postcss-color-gray) plugin.
 
-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.
+<!-- 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.
 
 <d-code-sandbox :src="csb_link" class="h-[600px]"></d-code-sandbox>

docs/content/tailwind/1.config.md

@@ -5,9 +5,9 @@ category: Tailwind CSS
 
 # Tailwind Config
 
-`@nuxtjs/tailwindcss` configures the Tailwind configuration to have the best user experience as possible by default.
+This module comes with a default Tailwind configuration file to provide the best possible user experience.
 
-## Default Configuration
+## Default configuration
 
 ```js{}[tailwind.config.js]
 {
@@ -25,9 +25,9 @@ category: Tailwind CSS
 }
 ```
 
-> The file is [available on GitHub](https://github.com/nuxt-community/tailwindcss-module/blob/main/src/tailwind.config.ts)
+> 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) on Tailwind docs.
+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
 
@@ -50,7 +50,7 @@ You can configure the path with the [configPath option](/options#configpath).
 
 <d-alert type="info">
 
-This config has the highest priority to overwrite the defaults and [tailwindcss.config](#config-option)
+This config has the highest priority to overwrite the defaults and [tailwindcss.config](#config-option).
 
 </d-alert>
 
@@ -68,13 +68,13 @@ module.exports = {
 }
 ```
 
-Learn more about the [Tailwind config](https://tailwindcss.com/docs/configuration) on their docs.
+Learn more about the [Tailwind config](https://tailwindcss.com/docs/configuration) in their docs.
 
 ### `config` option
 
-You can also use your `nuxt.config.js` to set your Tailwind Config with the `tailwindcss.config` property:
+You can also use your `nuxt.config` to set your Tailwind config with the `tailwindcss.config` property:
 
-```js [nuxt.config.js]
+```js [nuxt.config]
 import tailwindTypography from '@tailwindcss/typography'
 
 export default {
@@ -97,7 +97,7 @@ This config has less priority over the [tailwind.config.js](#tailwindconfigjs) f
 
 <d-alert type="warning">
 
-This is advanced usage and mostly used for Nuxt modules authors.
+This is an advanced usage section and indended primarily for Nuxt modules authors.
 
 </d-alert>
 
@@ -124,7 +124,7 @@ This hook can be asynchronous (using `async/await`) and is called after merging
 
 The provided config will be merged using [defu's array function merger](https://github.com/nuxt-contrib/defu#array-function-merger).
 
-When giving an array to the `content`, it will concat with the default value.
+When assigning an array to the `content` property, it will be concatenated with the default value.
 
 **Example**
 
@@ -149,7 +149,7 @@ The `content` option will be:
 ]
 ```
 
-If you want to fully overwrite, you can use a `function` that receives the default value:
+If you want to fully overwrite its value, you can use a `function` that receives the default value:
 
 ```js{}[tailwind.config.js]
 module.exports = {
@@ -173,13 +173,13 @@ The `content` option will be:
 
 <d-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`
+This merging strategy of with a function only applies to `plugins` and `content` since the default value is defined as an `Array`.
 
 </d-alert>
 
 ### Whitelisting classes
 
-If you need to whitelist classes and avoid the content purge system, you need to specify the `safelist` option like below :
+If you need to whitelist classes and avoid the content purge system, you need to specify the `safelist` option:
 
 ```js{}[tailwind.config.js]
 module.exports = {
@@ -196,11 +196,11 @@ module.exports = {
 
 ## Referencing in the application
 
-It can often be useful to reference tailwind configuration values in runtime. For example to access some of your theme values when dynamically applying inline styles in a component.
+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.
 
 If you need resolved Tailwind config at runtime, you can enable the [exposeConfig](/options#exposeconfig) option:
 
-```js{}[nuxt.config.js]
+```js{}[nuxt.config]
 export default {
   tailwindcss: {
     exposeConfig: true

docs/content/tailwind/2.viewer.md

@@ -7,7 +7,7 @@ category: Tailwind CSS
 
 > Visualize your Tailwind configuration with the viewer.
 
-Nuxt Tailwind will expose a `/_tailwind/` route in development so you can quickly visualize your tailwind configuration with easy copy pasting, thanks to the awesome [tailwind-config-viewer](https://github.com/rogden/tailwind-config-viewer) package ✨
+Nuxt Tailwind will expose a `/_tailwind/` route in development, so that you can quickly visualize your Tailwind configuration with easy copy-pasting (thanks to the awesome [tailwind-config-viewer](https://github.com/rogden/tailwind-config-viewer) package ✨).
 
 The viewer is available from the `v3.4.0` of `@nuxtjs/tailwindcss`.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/tailwindcss",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "TailwindCSS module for Nuxt",
   "repository": "nuxt-community/tailwindcss-module",
   "license": "MIT",
@@ -26,8 +26,9 @@
     "test": "yarn lint"
   },
   "dependencies": {
-    "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
+    "@nuxt/kit": "^3.0.0-rc.2",
     "@nuxt/postcss8": "^1.1.3",
+    "@types/tailwindcss": "^3.0.10",
     "autoprefixer": "^10.4.2",
     "chalk": "^4.1.2",
     "clear-module": "^4.1.2",
@@ -46,7 +47,7 @@
     "@nuxtjs/eslint-config-typescript": "latest",
     "codecov": "latest",
     "eslint": "latest",
-    "nuxt3": "latest",
+    "nuxt": "^3.0.0-rc.2",
     "standard-version": "latest"
   }
 }

playground/app.vue

@@ -9,6 +9,6 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import tailwindConfig from '#tailwind-config'
 </script>

playground/nuxt.config.ts

@@ -1,8 +1,7 @@
-import { defineNuxtConfig } from 'nuxt3'
-import tailwindModule from '../src/module'
+import { defineNuxtConfig } from 'nuxt'
+import tailwindModule from '..'
 
 export default defineNuxtConfig({
-  // vite: false,
   buildModules: [
     tailwindModule
   ],

src/module.ts

@@ -71,12 +71,17 @@ export default defineNuxtModule({
     // Expose resolved tailwind config as an alias
     // https://tailwindcss.com/docs/configuration/#referencing-in-javascript
     if (moduleOptions.exposeConfig) {
-      const resolveConfig = await import('tailwindcss/resolveConfig.js').then(r => r.default || r)
+      const resolveConfig = await import('tailwindcss/resolveConfig.js').then(r => r.default || r) as any
       const resolvedConfig = resolveConfig(tailwindConfig)
       const template = addTemplate({
         filename: 'tailwind.config.mjs',
         getContents: () => `export default ${JSON.stringify(resolvedConfig, null, 2)}`
       })
+      addTemplate({
+        filename: 'tailwind.config.d.ts',
+        getContents: () => 'declare const config: import("tailwindcss/tailwind-config").TailwindConfig\nexport { config as default }',
+        write: true
+      })
       nuxt.options.alias['#tailwind-config'] = template.dst
     }
 
@@ -122,9 +127,9 @@ export default defineNuxtModule({
       }
       addServerMiddleware({ path, handler: viewerDevMiddleware })
       nuxt.hook('listen', (_, listener) => {
-        const fullPath = `${withoutTrailingSlash(listener.url)}${path}`;
-        logger.info(`Tailwind Viewer: ${chalk.underline.yellow(fullPath)}`);
-      });
+        const fullPath = `${withoutTrailingSlash(listener.url)}${path}`
+        logger.info(`Tailwind Viewer: ${chalk.underline.yellow(fullPath)}`)
+      })
     }
   }
 })

tsconfig.json

@@ -1,12 +1,3 @@
 {
-  "extends": "./playground/.nuxt/tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "moduleResolution": "Node",
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "types": [
-      "node"
-    ]
-  }
+  "extends": "./playground/.nuxt/tsconfig.json"
 }