Add the variants factory plugin's documentation

README.md

@@ -13,9 +13,18 @@ Have a look at the [small guide](https://tailwind-config.meta.fr) for informatio
 This project uses [Git Flow](https://github.com/petervanderdoes/gitflow-avh) as a branching model and a combination of [ESlint](https://eslint.org/) and [Prettier](https://prettier.io/) to lint the JS files. You can lint your modifications when contributing with the following commands:
 
 ```bash
-# Lint all files in the src/ folder
+# Lint all files in the packages/ folder
 $ npm run lint
 
-# Lint files and test build files
-$ npm run test
+# Start the dev server for the test's assets
+$ npm run test:dev
+
+# Build the test's assets
+$ npm run test:build
+
+# Start the dev server for the documentation
+$ npm run docs:dev
+
+# Build the documentation
+$ npm run docs:build
 ```

packages/docs/.vuepress/config.js

@@ -18,6 +18,7 @@ module.exports = {
           { text: 'Breakpoint', link: '/plugins/breakpoint.html' },
           { text: 'Font-Face', link: '/plugins/font-face.html' },
           { text: 'Grid', link: '/plugins/grid.html' },
+          { text: 'Variants factory', link: '/plugins/variants-factory.html' },
           { text: 'Typography', link: '/plugins/typography.html' },
         ],
       },

packages/docs/configuration/readme.md

@@ -160,6 +160,7 @@ module.exports = {
 - [Breakpoint](/plugins/breakpoint.html) to exposes the `screens` configuration in the CSS
 - [Font-Face](/plugins/font-face.html) to easily add custom `@font-face` declarations
 - [Grid](/plugins/grid.html) to add some grid classes
+- [Variants Factory](/plugins/variants-factory.html) to add custom variants on the go
 - [Typography](/plugins/typography.html) to improve the typography utilities
 
 ---

packages/docs/plugins/grid.md

@@ -1,7 +1,7 @@
 ---
 sidebar: auto
 prev: ./font-face.html
-next: ./typography.html
+next: ./variants-factory.html
 ---
 
 # Grid

packages/docs/plugins/variants-factory.md

@@ -0,0 +1,27 @@
+---
+sidebar: auto
+prev: ./grid.html
+next: ./typography.html
+---
+
+# Variants factory
+
+The variants factory plugin creates simple custom variants on the go and simply is a shorthand for [`addVariant` Tailwind plugin](https://tailwindcss.com/docs/plugins) default functionality.
+
+## Configuration
+
+The plugin can be configured with the `theme.customVariants` property:
+
+```js{3-5}
+module.exports = {
+  theme: {
+    customVariants: {
+      children: '& > *', // like addVariant('children', '& > *')
+    },
+  },
+};
+```
+
+::: tip
+You should add new custom variants to your project via the `theme.extend` property to not override these defaults.
+:::