.gitignore

@@ -7,3 +7,4 @@ node_modules
 .DS_Store
 coverage
 dist
+sw.js

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 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.
 
+## [3.0.0](https://github.com/nuxt-community/tailwindcss-module/compare/v2.1.1...v3.0.0) (2020-08-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* ability to extend the Tailwind config (#133)
+
+### Features
+
+* ability to extend the Tailwind config ([#133](https://github.com/nuxt-community/tailwindcss-module/issues/133)) ([9d297b2](https://github.com/nuxt-community/tailwindcss-module/commit/9d297b22fc20b41fafe897ccfb21cd98ac66c1ce)), closes [#131](https://github.com/nuxt-community/tailwindcss-module/issues/131)
+
 ### [2.1.1](https://github.com/nuxt-community/tailwindcss-module/compare/v2.1.0...v2.1.1) (2020-07-29)
 
 ## [2.1.0](https://github.com/nuxt-community/tailwindcss-module/compare/v1.4.1...v2.1.0) (2020-07-20)

README.md

@@ -1,27 +1,37 @@
-<p align="center"><img src="https://user-images.githubusercontent.com/904724/59274615-fcef5780-8c5a-11e9-8b17-5c4915895144.png" alt="tailwindcss-module" width="500"/></p>
-<p align="center">
-  <a href="https://npmjs.com/package/@nuxtjs/tailwindcss"><img src="https://img.shields.io/npm/v/@nuxtjs/tailwindcss/latest.svg" alt="npm downloads"></a>
-  <a href="https://npmjs.com/package/@nuxtjs/tailwindcss"><img src="https://img.shields.io/npm/dt/@nuxtjs/tailwindcss.svg" alt="npm version"></a>
-  <a href="https://github.com/nuxt-community/tailwindcss-module/actions?query=workflow%3Aci"><img src="https://github.com/nuxt-community/tailwindcss-module/workflows/ci/badge.svg" alt="github ci"></a>
-  <a href="https://codecov.io/gh/nuxt-community/tailwindcss-module"><img src="https://img.shields.io/codecov/c/github/nuxt-community/tailwindcss-module.svg" alt="coverage"></a>
-  <a href="https://www.npmjs.com/package/@nuxtjs/tailwindcss"><img src="https://badgen.net/npm/license/@nuxtjs/tailwindcss" alt="License"></a>
-</p>
+[![@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/preview.png)](https://tailwindcss.nuxtjs.org)
+
+# @nuxtjs/tailwindcss
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
+[![Codecov][codecov-src]][codecov-href]
+[![License][license-src]][license-href]
 
 > [Tailwind CSS](https://tailwindcss.com) module for [NuxtJS](https://nuxtjs.org) with [modern css](https://tailwindcss.com/docs/using-with-preprocessors#future-css-features) ⚡️
 
-## Infos
+- [✨ &nbsp;Release Notes](https://tailwindcss.nuxtjs.org/releases)
+- [📖 &nbsp;Documentation](https://tailwindcss.nuxtjs.org)
+
+## Features
 
-- 📖 [Release Notes](https://github.com/nuxt-community/tailwindcss-module/releases)
-- 🏀 [Online playground](https://codesandbox.io/s/o4vn5pvp7q)
-- 🌿 [CSS Nesting Module Draft](https://drafts.csswg.org/css-nesting-1/)
-- 📐 [Display your breakpoints with nuxt-breaky](https://github.com/teamnovu/nuxt-breaky) 
-- 🌓 [Dark mode example](https://codesandbox.io/s/nuxt-dark-tailwindcss-17g2j?file=/tailwind.config.js) with [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) and [@nuxtjs/color-mode](https://github.com/nuxt-community/color-mode-module)
+- Zero configuration to start
+- PurgeCSS included for minimal CSS
+- Use latest CSS features (Stage 1)
+- Reference your Tailwind config in your app
+- Extendable by Nuxt modules
 
-## Setup
+[📖 &nbsp;Read more](https://tailwindcss.nuxtjs.org)
+
+## Quick Setup
 
 1. Add `@nuxtjs/tailwindcss` dependency to your project
+
 ```bash
-npm install --save-dev @nuxtjs/tailwindcss # or yarn add --dev @nuxtjs/tailwindcss
+# Using npm
+npm install --save-dev @nuxtjs/tailwindcss
+# Using yarn
+yarn add --dev @nuxtjs/tailwindcss
 ```
 
 2. Add `@nuxtjs/tailwindcss` to the `buildModules` section of `nuxt.config.js`
@@ -36,60 +46,9 @@ npm install --save-dev @nuxtjs/tailwindcss # or yarn add --dev @nuxtjs/tailwindc
 
 ℹ️ If you are using `nuxt < 2.9.0`, use `modules` property instead.
 
-## Usage
-
-This module will automatically create two files in your [srcDir](https://nuxtjs.org/api/configuration-srcdir):
-- `~/tailwind.config.js`
-- `~/assets/css/tailwind.css`
-
-It will also inject the CSS file globally and configure the [purge option](https://tailwindcss.com/docs/controlling-file-size#removing-unused-css) and [postcss-preset-env](https://preset-env.cssdb.org) to [stage 1](https://preset-env.cssdb.org/features#stage-1).
-
-## Configuration
-
-If you want to set a different path for the configuration file or css file, you can use these given options:
-
-```js
-// nuxt.config.js
-{
-  buildModules: [
-    '@nuxtjs/tailwindcss'
-  ],
-  tailwindcss: {
-    configPath: '~/config/tailwind.config.js',
-    cssPath: '~/assets/css/tailwind.css',
-    exposeConfig: false
-  }
-}
-```
-
-To enable purgeCSS in development, set `purge.enabled: true` in `tailwind.config.js`, be careful that it will slow down your development process. Learn more on [removing unused CSS](https://tailwindcss.com/docs/controlling-file-size#removing-unused-css).
-
-## Referencing in JavaScript
+That's it! You can now use Tailwind classes in your Nuxt app ✨
 
-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.
-
-If you need resolved tailwind config in runtime, you can enable `exposeConfig` option in `nuxt.config`:
-
-```js
-// nuxt.config.js
-{
-  tailwindcss: {
-    exposeConfig: true
-  }
-}
-```
-
-Then import where needed from `~tailwind.config`:
-
-```js
-// Import fully resolved config
-import tailwindConfig from '~tailwind.config'
-
- // Import only part which is required to allow tree-shaking
-import { theme } from '~tailwind.config'
-```
-
-**NOTE:** Please be aware this adds **~19.5KB (~3.5KB)** to the client bundle size.
+[📖 &nbsp;Read more](https://tailwindcss.nuxtjs.org/setup)
 
 ## Contributing
 
@@ -108,3 +67,19 @@ Or locally:
 [MIT License](./LICENSE)
 
 Copyright (c) Nuxt.js Team
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/tailwindcss/latest.svg
+[npm-version-href]: https://npmjs.com/package/@nuxtjs/tailwindcss
+
+[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/tailwindcss.svg
+[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/tailwindcss
+
+[github-actions-ci-src]: https://github.com/nuxt-community/tailwindcss-module/workflows/ci/badge.svg
+[github-actions-ci-href]: https://github.com/nuxt-community/tailwindcss-module/actions?query=workflow%3Aci
+
+[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/tailwindcss-module.svg
+[codecov-href]: https://codecov.io/gh/nuxt-community/tailwindcss-module
+
+[license-src]: https://img.shields.io/npm/l/@nuxtjs/tailwindcss.svg
+[license-href]: https://npmjs.com/package/@nuxtjs/tailwindcss

docs/content/en/examples-basic.md

@@ -0,0 +1,13 @@
+---
+title: Basic Usage Example
+menuTitle: Basic Usage
+description: 'Live example of basic usage of Nuxt TailwindCSS on CodeSandbox.'
+position: 5
+category: Examples
+csb_link: https://codesandbox.io/embed/nuxt-tailwindcss-o4vn5pvp7q
+fullscreen: true
+---
+
+Minimal example of a Nuxt project with Tailwind CSS module.
+
+<code-sandbox :src="csb_link"></code-sandbox>

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

@@ -0,0 +1,13 @@
+---
+title: Dark Mode Example
+menuTitle: Dark Mode
+description: 'Live example of dark mode with Nuxt TailwindCSS on CodeSandbox.'
+position: 6
+category: Examples
+csb_link: https://codesandbox.io/embed/nuxt-dark-tailwindcss-17g2j
+fullscreen: true
+---
+
+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.
+
+<code-sandbox :src="csb_link"></code-sandbox>

docs/content/en/examples-tailwindui.md

@@ -0,0 +1,13 @@
+---
+title: Tailwind UI Example
+menuTitle: Tailwind UI
+description: 'Live example of Tailwind UI plugin with Nuxt on CodeSandbox.'
+position: 7
+category: Examples
+csb_link: https://codesandbox.io/embed/nuxt-tailwindui-xy1jk
+fullscreen: true
+---
+
+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.
+
+<code-sandbox :src="csb_link"></code-sandbox>

docs/content/en/index.md

@@ -0,0 +1,25 @@
+---
+title: Introduction
+description: 'Add Tailwind CSS to your Nuxt application in seconds.'
+position: 1
+fullscreen: true
+category: ''
+categoryPosition: 1
+features:
+  - Zero configuration to start
+  - PurgeCSS included for minimal CSS
+  - Use latest CSS features (Stage 1)
+  - Reference your Tailwind config in your app
+  - Extendable by Nuxt modules
+---
+
+<img src="/preview.png" class="light-img" />
+<img src="/preview-dark.png" class="dark-img" />
+
+Add [Tailwind CSS](https://tailwindcss.com) to your [Nuxt](https://nuxtjs.org) application in seconds.
+
+## Features
+
+<list :items="features"></list>
+
+<p class="flex items-center">Enjoy a documentation with light and dark mode:&nbsp;<app-color-switcher class="p-2"></app-color-switcher></p>

docs/content/en/options.md

@@ -0,0 +1,103 @@
+---
+title: Options
+description: 'You can configure the module easily with the tailwindcss property.'
+position: 4
+category: Guide
+categoryPosition: 2
+---
+
+You can configure the module by using the `tailwindcss` property in the `nuxt.config.js`:
+
+```js{}[nuxt.config.js]
+export default {
+  // Defaults options
+  tailwindcss: {
+    cssPath: '~/assets/css/tailwind.css',
+    configPath: 'tailwind.config.js',
+    exposeConfig: false,
+    config: {}
+  }
+}
+```
+
+## `cssPath`
+
+- 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.**.
+
+```js{}[nuxt.config.js]
+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.
+
+## `configPath`
+
+- Default: `'tailwind.config.js'`
+
+Define the path of the Tailwind configuration file, **if the file exists, it will be imported**.
+
+<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).
+
+</alert>
+
+You can create the default `tailwind.config.js` file by running:
+
+```bash
+npx tailwindcss init
+```
+
+Example of overwriting the location of the config path:
+
+```js{}[nuxt.config.js]
+export default {
+  tailwindcss: {
+    configPath: '~/config/tailwind.js`
+  }
+}
+```
+
+## `exposeConfig`
+
+If you need resolved tailwind config in runtime, you can enable exposeConfig option in nuxt.config:
+
+```js{}[nuxt.config.js]
+export default {
+  tailwindcss: {
+    exposeConfig: true
+  }
+}
+```
+
+Learn more about it in the [Referencing in the application](/tailwind-config#referencing-in-the-application) section.
+
+
+## `config`
+
+- 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.
+
+```js{}[nuxt.config.js]
+export default {
+  tailwindcss: {
+    config: {
+      /* Extend the Tailwind config here */
+      purge: {
+        content: [
+          'content/**/**.md'
+        ]
+      }
+    }
+  }
+}
+```
+
+Learn more about overwriting Tailwind config [here](/tailwind-config).