Add variants section to flexbox docs

docs/source/docs/flexbox-align-content.blade.md

@@ -267,3 +267,39 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+### Responsive, Hover, and Focus Variants
+
+By default, only responsive variants are generated for flexbox utilities.
+
+You can control which variants are generated for the flexbox utilities by modifying the `flexbox` property in the `modules` section of your Tailwind config file.
+
+For example, this config will _also_ generate hover and focus variants:
+
+```js
+{
+    // ...
+    modules: { 
+        // ...
+        flexbox: ['responsive', 'hover', 'focus'],
+    }
+}
+```
+
+Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the align-content utilities.
+
+### Disabling
+
+If you aren't using the flexbox utilities in your project, you can disable them entirely by setting the `flexbox` property to `false` in the `modules` section of your config file:
+
+```js
+{
+    // ...
+    modules: {
+        // ...
+        flexbox: false,
+    }
+}
+```

docs/source/docs/flexbox-align-items.blade.md

@@ -147,3 +147,39 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+### Responsive, Hover, and Focus Variants
+
+By default, only responsive variants are generated for flexbox utilities.
+
+You can control which variants are generated for the flexbox utilities by modifying the `flexbox` property in the `modules` section of your Tailwind config file.
+
+For example, this config will _also_ generate hover and focus variants:
+
+```js
+{
+    // ...
+    modules: { 
+        // ...
+        flexbox: ['responsive', 'hover', 'focus'],
+    }
+}
+```
+
+Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the align-items utilities.
+
+### Disabling
+
+If you aren't using the flexbox utilities in your project, you can disable them entirely by setting the `flexbox` property to `false` in the `modules` section of your config file:
+
+```js
+{
+    // ...
+    modules: {
+        // ...
+        flexbox: false,
+    }
+}
+```

docs/source/docs/flexbox-align-self.blade.md

@@ -149,3 +149,39 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+### Responsive, Hover, and Focus Variants
+
+By default, only responsive variants are generated for flexbox utilities.
+
+You can control which variants are generated for the flexbox utilities by modifying the `flexbox` property in the `modules` section of your Tailwind config file.
+
+For example, this config will _also_ generate hover and focus variants:
+
+```js
+{
+    // ...
+    modules: { 
+        // ...
+        flexbox: ['responsive', 'hover', 'focus'],
+    }
+}
+```
+
+Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the align-self utilities.
+
+### Disabling
+
+If you aren't using the flexbox utilities in your project, you can disable them entirely by setting the `flexbox` property to `false` in the `modules` section of your config file:
+
+```js
+{
+    // ...
+    modules: {
+        // ...
+        flexbox: false,
+    }
+}
+```

docs/source/docs/flexbox-direction.blade.md

@@ -130,3 +130,39 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+### Responsive, Hover, and Focus Variants
+
+By default, only responsive variants are generated for flexbox utilities.
+
+You can control which variants are generated for the flexbox utilities by modifying the `flexbox` property in the `modules` section of your Tailwind config file.
+
+For example, this config will _also_ generate hover and focus variants:
+
+```js
+{
+    // ...
+    modules: { 
+        // ...
+        flexbox: ['responsive', 'hover', 'focus'],
+    }
+}
+```
+
+Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the flex-direction utilities.
+
+### Disabling
+
+If you aren't using the flexbox utilities in your project, you can disable them entirely by setting the `flexbox` property to `false` in the `modules` section of your config file:
+
+```js
+{
+    // ...
+    modules: {
+        // ...
+        flexbox: false,
+    }
+}
+```

docs/source/docs/flexbox-display.blade.md

@@ -96,3 +96,39 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+### Responsive, Hover, and Focus Variants
+
+By default, only responsive variants are generated for flexbox utilities.
+
+You can control which variants are generated for the flexbox utilities by modifying the `flexbox` property in the `modules` section of your Tailwind config file.
+
+For example, this config will _also_ generate hover and focus variants:
+
+```js
+{
+    // ...
+    modules: { 
+        // ...
+        flexbox: ['responsive', 'hover', 'focus'],
+    }
+}
+```
+
+Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the display utilities.
+
+### Disabling
+
+If you aren't using the flexbox utilities in your project, you can disable them entirely by setting the `flexbox` property to `false` in the `modules` section of your config file:
+
+```js
+{
+    // ...
+    modules: {
+        // ...
+        flexbox: false,
+    }
+}
+```

docs/source/docs/flexbox-flex-grow-shrink.blade.md

@@ -368,3 +368,39 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+### Responsive, Hover, and Focus Variants
+
+By default, only responsive variants are generated for flexbox utilities.
+
+You can control which variants are generated for the flexbox utilities by modifying the `flexbox` property in the `modules` section of your Tailwind config file.
+
+For example, this config will _also_ generate hover and focus variants:
+
+```js
+{
+    // ...
+    modules: { 
+        // ...
+        flexbox: ['responsive', 'hover', 'focus'],
+    }
+}
+```
+
+Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the flex utilities.
+
+### Disabling
+
+If you aren't using the flexbox utilities in your project, you can disable them entirely by setting the `flexbox` property to `false` in the `modules` section of your config file:
+
+```js
+{
+    // ...
+    modules: {
+        // ...
+        flexbox: false,
+    }
+}
+```

docs/source/docs/flexbox-justify-content.blade.md

@@ -147,3 +147,39 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+### Responsive, Hover, and Focus Variants
+
+By default, only responsive variants are generated for flexbox utilities.
+
+You can control which variants are generated for the flexbox utilities by modifying the `flexbox` property in the `modules` section of your Tailwind config file.
+
+For example, this config will _also_ generate hover and focus variants:
+
+```js
+{
+    // ...
+    modules: { 
+        // ...
+        flexbox: ['responsive', 'hover', 'focus'],
+    }
+}
+```
+
+Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the justify-content utilities.
+
+### Disabling
+
+If you aren't using the flexbox utilities in your project, you can disable them entirely by setting the `flexbox` property to `false` in the `modules` section of your config file:
+
+```js
+{
+    // ...
+    modules: {
+        // ...
+        flexbox: false,
+    }
+}
+```

docs/source/docs/flexbox-wrapping.blade.md

@@ -161,3 +161,39 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+### Responsive, Hover, and Focus Variants
+
+By default, only responsive variants are generated for flexbox utilities.
+
+You can control which variants are generated for the flexbox utilities by modifying the `flexbox` property in the `modules` section of your Tailwind config file.
+
+For example, this config will _also_ generate hover and focus variants:
+
+```js
+{
+    // ...
+    modules: { 
+        // ...
+        flexbox: ['responsive', 'hover', 'focus'],
+    }
+}
+```
+
+Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the flex-wrap utilities.
+
+### Disabling
+
+If you aren't using the flexbox utilities in your project, you can disable them entirely by setting the `flexbox` property to `false` in the `modules` section of your config file:
+
+```js
+{
+    // ...
+    modules: {
+        // ...
+        flexbox: false,
+    }
+}
+```