docs: general review of all sections (#461)

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