diff --git a/docs/source/_partials/customized-config.blade.php b/docs/source/_partials/customized-config.blade.php index f69383f2a..881ed5dc8 100644 --- a/docs/source/_partials/customized-config.blade.php +++ b/docs/source/_partials/customized-config.blade.php @@ -10,6 +10,9 @@ if (starts_with($line, '-')) { return '
-   ' . e(trim(substr($line, 1))) . '
'; } + if (starts_with($line, '//')) { + return '
    ' . e(trim($line)) . '
'; + } return '
    ' . e(trim($line)) . '
'; })->implode("\n") !!}
}
diff --git a/docs/source/_partials/variants-and-disabling.blade.php b/docs/source/_partials/variants-and-disabling.blade.php new file mode 100644 index 000000000..38e30fba9 --- /dev/null +++ b/docs/source/_partials/variants-and-disabling.blade.php @@ -0,0 +1,45 @@ +@php + $whichVariants = "only $variants[0]"; + for ($i = 1; $i < count($variants); $i++) { + $whichVariants .= (($i == count($variants) - 1) ? ' and ' : ', ') . $variants[$i]; + } + + $currentVariants = '\'' . collect($variants)->implode('\', \'') . '\''; + + $extraVariants = collect([ + 'responsive', + 'hover', + 'focus', + 'group-hover', + ])->diff($variants) + ->take(3 - count($variants)) + ->implode(' and '); +@endphp + +

Responsive, Hover, and Focus Variants

+ +

By default, {{ $whichVariants }} variants are generated for {{ $utility['name'] }} utilities.

+ +

You can control which variants are generated for the {{ $utility['name'] }} utilities by modifying the {{ $utility['property'] }} property in the modules section of your Tailwind config file.

+ +

For example, this config will also generate {{ $extraVariants }} variants:

+ +@component('_partials.customized-config', ['key' => 'modules']) + // ... +- {{ $utility['property'] }}: [{{$currentVariants}}], ++ {{ $utility['property'] }}: ['responsive', 'hover', 'focus'], +@endcomponent + +@isset($extraMessage) +

{!! $extraMessage !!}

+@endif + +

Disabling

+ +

If you aren't using the {{ $utility['name'] }} utilities in your project, you can disable them entirely by setting the {{ $utility['property'] }} property to false in the modules section of your config file:

+ +@component('_partials.customized-config', ['key' => 'modules']) + // ... +- {{ $utility['property'] }}: [{{$currentVariants}}], ++ {{ $utility['property'] }}: false, +@endcomponent diff --git a/docs/source/docs/background-attachment.blade.md b/docs/source/docs/background-attachment.blade.md index 45a6deeaa..60708655f 100644 --- a/docs/source/docs/background-attachment.blade.md +++ b/docs/source/docs/background-attachment.blade.md @@ -33,34 +33,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for background attachment utilities. - -You can control which variants are generated for the background attachment utilities by modifying the `backgroundAttachment` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - backgroundAttachment: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the background attachment utilities in your project, you can disable them entirely by setting the `backgroundAttachment` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - backgroundAttachment: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'background attachment', + 'property' => 'backgroundAttachment', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md index 34cc52414..2ea73bdce 100644 --- a/docs/source/docs/background-color.blade.md +++ b/docs/source/docs/background-color.blade.md @@ -43,34 +43,13 @@ Hover utilities can also be combined with responsive utilities by adding the res ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive and hover variants are generated for background color utilities. - -You can control which variants are generated for the background color utilities by modifying the `backgroundColors` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate focus variants: - -```js -{ - // ... - modules: { - // ... - backgroundColors: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the background color utilities in your project, you can disable them entirely by setting the `backgroundColors` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - backgroundColors: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'background color', + 'property' => 'backgroundColors', + ], + 'variants' => [ + 'responsive', + 'hover', + ], +]) diff --git a/docs/source/docs/background-position.blade.md b/docs/source/docs/background-position.blade.md index fc61497ae..5b171bc6d 100644 --- a/docs/source/docs/background-position.blade.md +++ b/docs/source/docs/background-position.blade.md @@ -63,34 +63,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for background position utilities. - -You can control which variants are generated for the background position utilities by modifying the `backgroundPosition` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - backgroundPosition: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the background position utilities in your project, you can disable them entirely by setting the `backgroundPosition` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - backgroundPosition: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'background position', + 'property' => 'backgroundPosition', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/background-repeat.blade.md b/docs/source/docs/background-repeat.blade.md index c69ead8b2..ac7994e2a 100644 --- a/docs/source/docs/background-repeat.blade.md +++ b/docs/source/docs/background-repeat.blade.md @@ -38,34 +38,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for background repeat utilities. - -You can control which variants are generated for the background repeat utilities by modifying the `backgroundRepeat` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - backgroundRepeat: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the background repeat utilities in your project, you can disable them entirely by setting the `backgroundRepeat` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - backgroundRepeat: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'background repeat', + 'property' => 'backgroundRepeat', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md index 29dc39269..3f81cf40a 100644 --- a/docs/source/docs/background-size.blade.md +++ b/docs/source/docs/background-size.blade.md @@ -28,34 +28,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for background size utilities. - -You can control which variants are generated for the background size utilities by modifying the `backgroundSize` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - backgroundSize: ['responsive', 'hover', 'focus'], - } -} -``` -k -### Disabling - -If you aren't using the background size utilities in your project, you can disable them entirely by setting the `backgroundSize` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - backgroundSize: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'background size', + 'property' => 'backgroundSize', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md index 9333b8ff7..8bc4f16e1 100644 --- a/docs/source/docs/border-color.blade.md +++ b/docs/source/docs/border-color.blade.md @@ -43,34 +43,13 @@ Hover utilities can also be combined with responsive utilities by adding the res ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive and hover variants are generated for border color utilities. - -You can control which variants are generated for the border color utilities by modifying the `borderColors` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate focus variants: - -```js -{ - // ... - modules: { - // ... - borderColors: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the border color utilities in your project, you can disable them entirely by setting the `borderColors` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - borderColors: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'border color', + 'property' => 'borderColors', + ], + 'variants' => [ + 'responsive', + 'hover', + ], +]) diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md index 14c0413cd..4cd4fc28e 100644 --- a/docs/source/docs/border-radius.blade.md +++ b/docs/source/docs/border-radius.blade.md @@ -367,34 +367,12 @@ By default Tailwind provides five border radius size utilities. You can change, + 'large': '12px', @endcomponent -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for border radius utilities. - -You can control which variants are generated for the border radius utilities by modifying the `borderRadius` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - borderRadius: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the border radius utilities in your project, you can disable them entirely by setting the `borderRadius` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - borderRadius: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'border radius', + 'property' => 'borderRadius', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/border-style.blade.md b/docs/source/docs/border-style.blade.md index 7397f0ba0..a37b2c5ef 100644 --- a/docs/source/docs/border-style.blade.md +++ b/docs/source/docs/border-style.blade.md @@ -39,34 +39,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for border style utilities. - -You can control which variants are generated for the border style utilities by modifying the `borderStyle` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - borderStyle: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the border style utilities in your project, you can disable them entirely by setting the `borderStyle` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - borderStyle: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'border style', + 'property' => 'borderStyle', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md index eff21433a..df282009d 100644 --- a/docs/source/docs/border-width.blade.md +++ b/docs/source/docs/border-width.blade.md @@ -40,34 +40,12 @@ For example, `.border` would add a `1px` border to all sides of the element, whe ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for border width utilities. - -You can control which variants are generated for the border width utilities by modifying the `borderWidths` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - borderWidths: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the border width utilities in your project, you can disable them entirely by setting the `borderWidths` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - borderWidths: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'border width', + 'property' => 'borderWidths', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/cursor.blade.md b/docs/source/docs/cursor.blade.md index 54f8a2833..44c0b9a58 100644 --- a/docs/source/docs/cursor.blade.md +++ b/docs/source/docs/cursor.blade.md @@ -33,34 +33,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for cursor utilities. - -You can control which variants are generated for the cursor utilities by modifying the `cursor` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - cursor: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the cursor utilities in your project, you can disable them entirely by setting the `cursor` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - cursor: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'cursor', + 'property' => 'cursor', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/display.blade.md b/docs/source/docs/display.blade.md index f23e9cea5..9364e9358 100644 --- a/docs/source/docs/display.blade.md +++ b/docs/source/docs/display.blade.md @@ -63,34 +63,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for display utilities. - -You can control which variants are generated for the display utilities by modifying the `display` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - display: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the display utilities in your project, you can disable them entirely by setting the `display` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - display: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'display', + 'property' => 'display', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md index 368822923..0fae06f32 100644 --- a/docs/source/docs/flexbox-align-content.blade.md +++ b/docs/source/docs/flexbox-align-content.blade.md @@ -270,36 +270,13 @@ For more information about Tailwind's responsive design features, check out the ## 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, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'flexbox', + 'property' => 'flexbox', + ], + 'variants' => [ + 'responsive', + ], + 'extraMessage' => 'Note that modifying the flexbox property will affect what variants are generated for all flexbox modules, not just the align-content utilities.' +]) diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md index 329ff459c..39f839c32 100644 --- a/docs/source/docs/flexbox-align-items.blade.md +++ b/docs/source/docs/flexbox-align-items.blade.md @@ -150,36 +150,13 @@ For more information about Tailwind's responsive design features, check out the ## 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, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'flexbox', + 'property' => 'flexbox', + ], + 'variants' => [ + 'responsive', + ], + 'extraMessage' => 'Note that modifying the flexbox property will affect what variants are generated for all flexbox modules, not just the align-items utilities.' +]) diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md index cb72851d0..bc59df587 100644 --- a/docs/source/docs/flexbox-align-self.blade.md +++ b/docs/source/docs/flexbox-align-self.blade.md @@ -152,36 +152,13 @@ For more information about Tailwind's responsive design features, check out the ## 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, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'flexbox', + 'property' => 'flexbox', + ], + 'variants' => [ + 'responsive', + ], + 'extraMessage' => 'Note that modifying the flexbox property will affect what variants are generated for all flexbox modules, not just the align-self utilities.' +]) diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md index 7fa3ee507..fb821f57e 100644 --- a/docs/source/docs/flexbox-direction.blade.md +++ b/docs/source/docs/flexbox-direction.blade.md @@ -133,36 +133,13 @@ For more information about Tailwind's responsive design features, check out the ## 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, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'flexbox', + 'property' => 'flexbox', + ], + 'variants' => [ + 'responsive', + ], + 'extraMessage' => 'Note that modifying the flexbox property will affect what variants are generated for all flexbox modules, not just the flex-direction utilities.' +]) diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md index 4184760c8..6b51e1759 100644 --- a/docs/source/docs/flexbox-display.blade.md +++ b/docs/source/docs/flexbox-display.blade.md @@ -99,36 +99,13 @@ For more information about Tailwind's responsive design features, check out the ## 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, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'flexbox', + 'property' => 'flexbox', + ], + 'variants' => [ + 'responsive', + ], + 'extraMessage' => 'Note that modifying the flexbox property will affect what variants are generated for all flexbox modules, not just the display utilities.' +]) diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md index f0b94ddef..1fd6b33c4 100644 --- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md +++ b/docs/source/docs/flexbox-flex-grow-shrink.blade.md @@ -371,36 +371,13 @@ For more information about Tailwind's responsive design features, check out the ## 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, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'flexbox', + 'property' => 'flexbox', + ], + 'variants' => [ + 'responsive', + ], + 'extraMessage' => 'Note that modifying the flexbox property will affect what variants are generated for all flexbox modules, not just the flex utilities.' +]) diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md index e4f8852e2..0ca75df2d 100644 --- a/docs/source/docs/flexbox-justify-content.blade.md +++ b/docs/source/docs/flexbox-justify-content.blade.md @@ -150,36 +150,13 @@ For more information about Tailwind's responsive design features, check out the ## 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, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'flexbox', + 'property' => 'flexbox', + ], + 'variants' => [ + 'responsive', + ], + 'extraMessage' => 'Note that modifying the flexbox property will affect what variants are generated for all flexbox modules, not just the justify-content utilities.' +]) diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md index d1887deb6..05167a7ee 100644 --- a/docs/source/docs/flexbox-wrapping.blade.md +++ b/docs/source/docs/flexbox-wrapping.blade.md @@ -164,36 +164,13 @@ For more information about Tailwind's responsive design features, check out the ## 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, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'flexbox', + 'property' => 'flexbox', + ], + 'variants' => [ + 'responsive', + ], + 'extraMessage' => 'Note that modifying the flexbox property will affect what variants are generated for all flexbox modules, not just the flex-wrap utilities.' +]) diff --git a/docs/source/docs/floats.blade.md b/docs/source/docs/floats.blade.md index 59c41d5d5..6ca9a94bb 100644 --- a/docs/source/docs/floats.blade.md +++ b/docs/source/docs/floats.blade.md @@ -38,34 +38,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for float utilities. - -You can control which variants are generated for the float utilities by modifying the `float` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - float: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the float utilities in your project, you can disable them entirely by setting the `float` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - float: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'float', + 'property' => 'float', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md index e2edbf2d8..a53afde6d 100644 --- a/docs/source/docs/font-weight.blade.md +++ b/docs/source/docs/font-weight.blade.md @@ -63,34 +63,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive and hover variants are generated for font weight utilities. - -You can control which variants are generated for the font weight utilities by modifying the `fontWeights` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate focus variants: - -```js -{ - // ... - modules: { - // ... - fontWeights: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the font weight utilities in your project, you can disable them entirely by setting the `fontWeights` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - fontWeights: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'font weight', + 'property' => 'fontWeights', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md index 20c9bed63..2c7d8fcd3 100644 --- a/docs/source/docs/fonts.blade.md +++ b/docs/source/docs/fonts.blade.md @@ -33,34 +33,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for font utilities. - -You can control which variants are generated for the font utilities by modifying the `fonts` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - fonts: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the font utilities in your project, you can disable them entirely by setting the `fonts` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - fonts: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'font', + 'property' => 'fonts', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md index e4f9e54a7..e1f5e2245 100644 --- a/docs/source/docs/forms.blade.md +++ b/docs/source/docs/forms.blade.md @@ -40,34 +40,12 @@ Form controls are great candidates for component classes, but just for fun, here ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for form control appearance utilities. - -You can control which variants are generated for form control appearance utilities by modifying the `appearance` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - appearance: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the form control appearance utilities in your project, you can disable them entirely by setting the `appearance` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - appearance: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'form control appearance', + 'property' => 'appearance', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/height.blade.md b/docs/source/docs/height.blade.md index fe07b4310..87534acfb 100644 --- a/docs/source/docs/height.blade.md +++ b/docs/source/docs/height.blade.md @@ -104,34 +104,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for height utilities. - -You can control which variants are generated for the height utilities by modifying the `height` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - height: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the height utilities in your project, you can disable them entirely by setting the `height` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - height: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'height', + 'property' => 'height', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md index 295b75ec1..218b6a097 100644 --- a/docs/source/docs/letter-spacing.blade.md +++ b/docs/source/docs/letter-spacing.blade.md @@ -33,34 +33,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for tracking utilities. - -You can control which variants are generated for the tracking utilities by modifying the `tracking` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - tracking: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the tracking utilities in your project, you can disable them entirely by setting the `tracking` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - tracking: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'tracking', + 'property' => 'tracking', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md index 082e4c379..fd2fc8d37 100644 --- a/docs/source/docs/line-height.blade.md +++ b/docs/source/docs/line-height.blade.md @@ -38,34 +38,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for leading utilities. - -You can control which variants are generated for the leading utilities by modifying the `leading` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - leading: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the leading utilities in your project, you can disable them entirely by setting the `leading` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - leading: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'leading', + 'property' => 'leading', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md index b757ff902..a79b17e91 100644 --- a/docs/source/docs/lists.blade.md +++ b/docs/source/docs/lists.blade.md @@ -23,34 +23,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for list utilities. - -You can control which variants are generated for the list utilities by modifying the `lists` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - lists: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the list utilities in your project, you can disable them entirely by setting the `lists` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - lists: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'list', + 'property' => 'lists', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/max-height.blade.md b/docs/source/docs/max-height.blade.md index 3456181f1..6d1325dd2 100644 --- a/docs/source/docs/max-height.blade.md +++ b/docs/source/docs/max-height.blade.md @@ -29,34 +29,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for max height utilities. - -You can control which variants are generated for the max height utilities by modifying the `maxHeight` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - maxHeight: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the max height utilities in your project, you can disable them entirely by setting the `maxHeight` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - maxHeight: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'max-height', + 'property' => 'maxHeight', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/max-width.blade.md b/docs/source/docs/max-width.blade.md index 48cccbbb9..dc1903486 100644 --- a/docs/source/docs/max-width.blade.md +++ b/docs/source/docs/max-width.blade.md @@ -69,34 +69,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for max width utilities. - -You can control which variants are generated for the max width utilities by modifying the `maxWidth` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - maxWidth: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the max width utilities in your project, you can disable them entirely by setting the `maxWidth` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - maxWidth: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'max-width', + 'property' => 'maxWidth', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/min-height.blade.md b/docs/source/docs/min-height.blade.md index bdff1bfb4..6cfbbc4cf 100644 --- a/docs/source/docs/min-height.blade.md +++ b/docs/source/docs/min-height.blade.md @@ -34,34 +34,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for min height utilities. - -You can control which variants are generated for the min height utilities by modifying the `minHeight` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - minHeight: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the min height utilities in your project, you can disable them entirely by setting the `minHeight` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - minHeight: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'min-height', + 'property' => 'minHeight', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/min-width.blade.md b/docs/source/docs/min-width.blade.md index 0a87fc6c2..3eb1562e7 100644 --- a/docs/source/docs/min-width.blade.md +++ b/docs/source/docs/min-width.blade.md @@ -29,34 +29,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for min width utilities. - -You can control which variants are generated for the min width utilities by modifying the `minWidth` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - minWidth: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the min width utilities in your project, you can disable them entirely by setting the `minWidth` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - minWidth: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'min-width', + 'property' => 'minWidth', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md index 4b5b75cb4..8484b41f8 100644 --- a/docs/source/docs/opacity.blade.md +++ b/docs/source/docs/opacity.blade.md @@ -114,34 +114,12 @@ By default Tailwind provides five opacity utilities based on a simple numeric sc '100': '1', @endcomponent -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for opacity utilities. - -You can control which variants are generated for the opacity utilities by modifying the `opacity` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - opacity: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the opacity utilities in your project, you can disable them entirely by setting the `opacity` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - opacity: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'opacity', + 'property' => 'opacity', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md index 4f803d0ee..36f930bf8 100644 --- a/docs/source/docs/overflow.blade.md +++ b/docs/source/docs/overflow.blade.md @@ -222,34 +222,12 @@ For more information about Tailwind's responsive design features, check out the ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for overflow utilities. - -You can control which variants are generated for the overflow utilities by modifying the `overflow` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - overflow: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the overflow utilities in your project, you can disable them entirely by setting the `overflow` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - overflow: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'overflow', + 'property' => 'overflow', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md index db33f6e28..a8ae844ff 100644 --- a/docs/source/docs/pointer-events.blade.md +++ b/docs/source/docs/pointer-events.blade.md @@ -28,34 +28,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for pointer event utilities. - -You can control which variants are generated for the pointer event utilities by modifying the `pointerEvents` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - pointerEvents: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the pointer event utilities in your project, you can disable them entirely by setting the `pointerEvents` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - pointerEvents: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'pointer event', + 'property' => 'pointerEvents', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md index bd8fbd007..c1dc30eab 100644 --- a/docs/source/docs/positioning.blade.md +++ b/docs/source/docs/positioning.blade.md @@ -407,34 +407,12 @@ For more information about Tailwind's responsive design features, check out the ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for positioning utilities. - -You can control which variants are generated for the positioning utilities by modifying the `position` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - position: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the positioning utilities in your project, you can disable them entirely by setting the `position` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - position: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'positioning', + 'property' => 'position', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md index 70e78d3f4..a4c1f89ae 100644 --- a/docs/source/docs/resize.blade.md +++ b/docs/source/docs/resize.blade.md @@ -39,34 +39,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for resizing utilities. - -You can control which variants are generated for the resizing utilities by modifying the `resize` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - resize: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the resizing utilities in your project, you can disable them entirely by setting the `resize` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - resize: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'resizing', + 'property' => 'resize', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md index 2ac47aa00..46de97295 100644 --- a/docs/source/docs/shadows.blade.md +++ b/docs/source/docs/shadows.blade.md @@ -136,34 +136,12 @@ If a `default` shadow is provided, it will be used for the non-suffixed `.shadow 'none': 'none', @endcomponent -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for shadow utilities. - -You can control which variants are generated for the shadow utilities by modifying the `shadows` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - shadows: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the shadow utilities in your project, you can disable them entirely by setting the `shadows` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - shadows: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'shadow', + 'property' => 'shadows', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/text-alignment.blade.md b/docs/source/docs/text-alignment.blade.md index 6afda5845..afd8ec3e1 100644 --- a/docs/source/docs/text-alignment.blade.md +++ b/docs/source/docs/text-alignment.blade.md @@ -38,34 +38,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for text align utilities. - -You can control which variants are generated for the text align utilities by modifying the `textAlign` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - textAlign: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the text align utilities in your project, you can disable them entirely by setting the `textAlign` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - textAlign: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'text alignment', + 'property' => 'textAlign', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md index 69efd3823..0de8f055a 100644 --- a/docs/source/docs/text-color.blade.md +++ b/docs/source/docs/text-color.blade.md @@ -43,34 +43,13 @@ Hover utilities can also be combined with responsive utilities by adding the res ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive and hover variants are generated for text color utilities. - -You can control which variants are generated for the text color utilities by modifying the `textColors` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate focus variants: - -```js -{ - // ... - modules: { - // ... - textColors: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the text color utilities in your project, you can disable them entirely by setting the `textColors` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - textColors: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'text color', + 'property' => 'textColors', + ], + 'variants' => [ + 'responsive', + 'hover', + ], +]) diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md index 6b788b9a2..2ecc40e1f 100644 --- a/docs/source/docs/text-sizing.blade.md +++ b/docs/source/docs/text-sizing.blade.md @@ -63,34 +63,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for text size utilities. - -You can control which variants are generated for the text size utilities by modifying the `textSizes` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - textSizes: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the text size utilities in your project, you can disable them entirely by setting the `textSizes` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - textSizes: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'text sizing', + 'property' => 'textSizes', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md index d0dfb5d19..48ee7d503 100644 --- a/docs/source/docs/text-style.blade.md +++ b/docs/source/docs/text-style.blade.md @@ -87,34 +87,13 @@ Hover utilities can also be combined with responsive utilities by adding the res ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive and hover variants are generated for text style utilities. - -You can control which variants are generated for the text style utilities by modifying the `textStyle` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate focus variants: - -```js -{ - // ... - modules: { - // ... - textStyle: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the text style utilities in your project, you can disable them entirely by setting the `textStyle` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - textStyle: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'text style', + 'property' => 'textStyle', + ], + 'variants' => [ + 'responsive', + 'hover', + ], +]) diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md index df4d1cd7d..ef76d83b9 100644 --- a/docs/source/docs/user-select.blade.md +++ b/docs/source/docs/user-select.blade.md @@ -28,34 +28,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for user select utilities. - -You can control which variants are generated for the user select utilities by modifying the `userSelect` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - userSelect: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the user select utilities in your project, you can disable them entirely by setting the `userSelect` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - userSelect: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'user-select', + 'property' => 'userSelect', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md index b75267864..be85ec7c7 100644 --- a/docs/source/docs/vertical-alignment.blade.md +++ b/docs/source/docs/vertical-alignment.blade.md @@ -48,34 +48,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for vertical alignment utilities. - -You can control which variants are generated for the vertical alignment utilities by modifying the `verticalAlign` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - verticalAlign: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the vertical alignment utilities in your project, you can disable them entirely by setting the `verticalAlign` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - verticalAlign: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'vertical alignment', + 'property' => 'verticalAlign', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md index 69ec02f15..625a199af 100644 --- a/docs/source/docs/visibility.blade.md +++ b/docs/source/docs/visibility.blade.md @@ -79,34 +79,12 @@ For more information about Tailwind's responsive design features, check out the ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for visibility utilities. - -You can control which variants are generated for the visibility utilities by modifying the `visibility` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - visibility: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the visibility utilities in your project, you can disable them entirely by setting the `visibility` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - visibility: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'visibility', + 'property' => 'visibility', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md index d62c157d7..409d23ed0 100644 --- a/docs/source/docs/whitespace-and-wrapping.blade.md +++ b/docs/source/docs/whitespace-and-wrapping.blade.md @@ -58,34 +58,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for whitespace & wrapping utilities. - -You can control which variants are generated for the whitespace & wrapping utilities by modifying the `whitespace` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - whitespace: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the whitespace & wrapping utilities in your project, you can disable them entirely by setting the `whitespace` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - whitespace: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'whitespace & wrapping', + 'property' => 'whitespace', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/width.blade.md b/docs/source/docs/width.blade.md index 51105dd9b..d5f690976 100644 --- a/docs/source/docs/width.blade.md +++ b/docs/source/docs/width.blade.md @@ -159,34 +159,12 @@ features: ## Customizing -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for width utilities. - -You can control which variants are generated for the width utilities by modifying the `width` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - width: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the width utilities in your project, you can disable them entirely by setting the `width` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - width: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'width', + 'property' => 'width', + ], + 'variants' => [ + 'responsive', + ], +]) diff --git a/docs/source/docs/z-index.blade.md b/docs/source/docs/z-index.blade.md index 66a340e11..3e4a7bee7 100644 --- a/docs/source/docs/z-index.blade.md +++ b/docs/source/docs/z-index.blade.md @@ -155,34 +155,12 @@ By default Tailwind provides six numeric `z-index` utilities and an `auto` utili 'auto': 'auto', @endcomponent -### Responsive, Hover, and Focus Variants - -By default, only responsive variants are generated for z-index utilities. - -You can control which variants are generated for the z-index utilities by modifying the `zIndex` property in the `modules` section of your Tailwind config file. - -For example, this config will _also_ generate hover and focus variants: - -```js -{ - // ... - modules: { - // ... - zIndex: ['responsive', 'hover', 'focus'], - } -} -``` - -### Disabling - -If you aren't using the z-index utilities in your project, you can disable them entirely by setting the `zIndex` property to `false` in the `modules` section of your config file: - -```js -{ - // ... - modules: { - // ... - zIndex: false, - } -} -``` +@include('_partials.variants-and-disabling', [ + 'utility' => [ + 'name' => 'z-index', + 'property' => 'zIndex', + ], + 'variants' => [ + 'responsive', + ], +])