From 2790db824c790c00949dc3a41937effc12837bb3 Mon Sep 17 00:00:00 2001
From: Antoine Quatrelivre <antoine@studiometa.fr>
Date: Thu, 30 Nov 2023 12:03:06 +0100
Subject: [PATCH] Add the variants factory plugin's documentation

---
 README.md                                 | 15 ++++++++++---
 packages/docs/.vuepress/config.js         |  1 +
 packages/docs/configuration/readme.md     |  1 +
 packages/docs/plugins/grid.md             |  2 +-
 packages/docs/plugins/variants-factory.md | 27 +++++++++++++++++++++++
 5 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 packages/docs/plugins/variants-factory.md

diff --git a/README.md b/README.md
index 3b98a5f..3622a88 100644
--- a/README.md
+++ b/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
 ```
diff --git a/packages/docs/.vuepress/config.js b/packages/docs/.vuepress/config.js
index df2e967..efc7b0d 100644
--- a/packages/docs/.vuepress/config.js
+++ b/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' },
         ],
       },
diff --git a/packages/docs/configuration/readme.md b/packages/docs/configuration/readme.md
index e1a4ab9..48ebc52 100644
--- a/packages/docs/configuration/readme.md
+++ b/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
 
 ---
diff --git a/packages/docs/plugins/grid.md b/packages/docs/plugins/grid.md
index 6e869eb..c0034bc 100644
--- a/packages/docs/plugins/grid.md
+++ b/packages/docs/plugins/grid.md
@@ -1,7 +1,7 @@
 ---
 sidebar: auto
 prev: ./font-face.html
-next: ./typography.html
+next: ./variants-factory.html
 ---
 
 # Grid
diff --git a/packages/docs/plugins/variants-factory.md b/packages/docs/plugins/variants-factory.md
new file mode 100644
index 0000000..eac7c4a
--- /dev/null
+++ b/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.
+:::