From 923a5a22c403e899f26c8531ae1e60996d99d99f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 21:19:47 +0100 Subject: [PATCH] Add variants section to flexbox docs --- .../docs/flexbox-align-content.blade.md | 36 +++++++++++++++++++ docs/source/docs/flexbox-align-items.blade.md | 36 +++++++++++++++++++ docs/source/docs/flexbox-align-self.blade.md | 36 +++++++++++++++++++ docs/source/docs/flexbox-direction.blade.md | 36 +++++++++++++++++++ docs/source/docs/flexbox-display.blade.md | 36 +++++++++++++++++++ .../docs/flexbox-flex-grow-shrink.blade.md | 36 +++++++++++++++++++ .../docs/flexbox-justify-content.blade.md | 36 +++++++++++++++++++ docs/source/docs/flexbox-wrapping.blade.md | 36 +++++++++++++++++++ 8 files changed, 288 insertions(+) diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md index 6f21206e0..368822923 100644 --- a/docs/source/docs/flexbox-align-content.blade.md +++ b/docs/source/docs/flexbox-align-content.blade.md @@ -267,3 +267,39 @@ For more information about Tailwind's responsive design features, check out the @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, + } +} +``` diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md index 3428011ad..329ff459c 100644 --- a/docs/source/docs/flexbox-align-items.blade.md +++ b/docs/source/docs/flexbox-align-items.blade.md @@ -147,3 +147,39 @@ For more information about Tailwind's responsive design features, check out the @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, + } +} +``` diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md index 46441d121..cb72851d0 100644 --- a/docs/source/docs/flexbox-align-self.blade.md +++ b/docs/source/docs/flexbox-align-self.blade.md @@ -149,3 +149,39 @@ For more information about Tailwind's responsive design features, check out the @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, + } +} +``` diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md index a449cfe0c..7fa3ee507 100644 --- a/docs/source/docs/flexbox-direction.blade.md +++ b/docs/source/docs/flexbox-direction.blade.md @@ -130,3 +130,39 @@ For more information about Tailwind's responsive design features, check out the @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, + } +} +``` diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md index 543e52811..4184760c8 100644 --- a/docs/source/docs/flexbox-display.blade.md +++ b/docs/source/docs/flexbox-display.blade.md @@ -96,3 +96,39 @@ For more information about Tailwind's responsive design features, check out the @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, + } +} +``` diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md index e30f8ad20..f0b94ddef 100644 --- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md +++ b/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 @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, + } +} +``` diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md index 9483a2af0..e4f8852e2 100644 --- a/docs/source/docs/flexbox-justify-content.blade.md +++ b/docs/source/docs/flexbox-justify-content.blade.md @@ -147,3 +147,39 @@ For more information about Tailwind's responsive design features, check out the @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, + } +} +``` diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md index d919eba88..d1887deb6 100644 --- a/docs/source/docs/flexbox-wrapping.blade.md +++ b/docs/source/docs/flexbox-wrapping.blade.md @@ -161,3 +161,39 @@ For more information about Tailwind's responsive design features, check out the @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, + } +} +```