From d249608f1e0b521fedc94e23def00fff80e40ea0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 17:44:23 +0100 Subject: [PATCH 01/42] appearance --- docs/source/docs/forms.blade.md | 34 +++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md index 7f1f822c8..aa4d8a8e6 100644 --- a/docs/source/docs/forms.blade.md +++ b/docs/source/docs/forms.blade.md @@ -37,3 +37,37 @@ Form controls are great candidates for component classes, but just for fun, here @endcomponent + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From a77ca8e38cbf760be6578127d35c1f5c1d369aa3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 17:52:04 +0100 Subject: [PATCH 02/42] backgroundAttachment --- .../docs/background-attachment.blade.md | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/background-attachment.blade.md b/docs/source/docs/background-attachment.blade.md index 42ac796ae..e80e27bd3 100644 --- a/docs/source/docs/background-attachment.blade.md +++ b/docs/source/docs/background-attachment.blade.md @@ -30,3 +30,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 3e86360a9ac244c9122a8fc4dc2819180f621e60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:01:15 +0100 Subject: [PATCH 03/42] backgroundColors --- docs/source/docs/background-color.blade.md | 34 ++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md index 9fdb51cbc..91c9cd7a7 100644 --- a/docs/source/docs/background-color.blade.md +++ b/docs/source/docs/background-color.blade.md @@ -40,3 +40,37 @@ Hover utilities can also be combined with responsive utilities by adding the res ```html ``` + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no focus, or group-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, + } +} +``` From 0c02fee28dfeb8bcb8c4f51e5d9e4062f39a3e3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:01:36 +0100 Subject: [PATCH 04/42] backgroundPosition --- docs/source/docs/background-position.blade.md | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/background-position.blade.md b/docs/source/docs/background-position.blade.md index 5dd2ae2c5..96b3cd451 100644 --- a/docs/source/docs/background-position.blade.md +++ b/docs/source/docs/background-position.blade.md @@ -60,3 +60,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From db2176bc628e0429a894b35979239e0dade87e51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:01:50 +0100 Subject: [PATCH 05/42] backgroundRepeat --- docs/source/docs/background-repeat.blade.md | 36 ++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/docs/source/docs/background-repeat.blade.md b/docs/source/docs/background-repeat.blade.md index c1be99d15..95b22290d 100644 --- a/docs/source/docs/background-repeat.blade.md +++ b/docs/source/docs/background-repeat.blade.md @@ -34,4 +34,38 @@ features: 'Repeat the background image only vertically.', ], ] -]) \ No newline at end of file +]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 45913d225099077982873b338f46fac5afdb9e04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:02:22 +0100 Subject: [PATCH 06/42] backgroundSize --- docs/source/docs/background-size.blade.md | 34 +++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md index 521ff8913..7d96ea2fb 100644 --- a/docs/source/docs/background-size.blade.md +++ b/docs/source/docs/background-size.blade.md @@ -25,3 +25,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 9248d28778e7dfd7fcbad84c5dff2e25fef76025 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:03:02 +0100 Subject: [PATCH 07/42] borderColors --- docs/source/docs/border-color.blade.md | 34 ++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md index 4ab869df3..6426f50fa 100644 --- a/docs/source/docs/border-color.blade.md +++ b/docs/source/docs/border-color.blade.md @@ -40,3 +40,37 @@ Hover utilities can also be combined with responsive utilities by adding the res ```html ``` + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no focus, or group-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, + } +} +``` From 19fd10eb7987e0b3aada1063d3ad2958147bbdb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:12:50 +0100 Subject: [PATCH 08/42] borderStyle --- docs/source/docs/border-radius.blade.md | 32 ++++++++++++++++++++++ docs/source/docs/border-style.blade.md | 35 +++++++++++++++++++++++++ 2 files changed, 67 insertions(+) diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md index 40a7730ec..87f08a680 100644 --- a/docs/source/docs/border-radius.blade.md +++ b/docs/source/docs/border-radius.blade.md @@ -366,3 +366,35 @@ By default Tailwind provides five border radius size utilities. You can change, - 'full': '9999px', + 'large': '12px', @endcomponent + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` diff --git a/docs/source/docs/border-style.blade.md b/docs/source/docs/border-style.blade.md index a55a342b1..d62b7542e 100644 --- a/docs/source/docs/border-style.blade.md +++ b/docs/source/docs/border-style.blade.md @@ -35,3 +35,38 @@ features: ], ] ]) + + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From d62cf62e87de0640d53796c76941e9a75d22e4b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:14:25 +0100 Subject: [PATCH 09/42] borderWidths --- docs/source/docs/border-width.blade.md | 34 ++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md index 19dca9611..3d0a0b749 100644 --- a/docs/source/docs/border-width.blade.md +++ b/docs/source/docs/border-width.blade.md @@ -37,3 +37,37 @@ For example, `.border` would add a `1px` border to all sides of the element, whe
8 8px
+ +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 50e79c5fa080d8396371cf39a472477f3e34bb97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:15:58 +0100 Subject: [PATCH 10/42] cursor --- docs/source/docs/cursor.blade.md | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/cursor.blade.md b/docs/source/docs/cursor.blade.md index c11acc05c..bc33f4d89 100644 --- a/docs/source/docs/cursor.blade.md +++ b/docs/source/docs/cursor.blade.md @@ -30,3 +30,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From a8c4b60c06d9957f03151215255d8988264547c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:36:12 +0100 Subject: [PATCH 11/42] display --- docs/source/docs/display.blade.md | 34 +++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/display.blade.md b/docs/source/docs/display.blade.md index bb816e2ef..a74c4b35d 100644 --- a/docs/source/docs/display.blade.md +++ b/docs/source/docs/display.blade.md @@ -60,3 +60,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From b67d4f1e251b8eae952775590341596ecc232b4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:40:00 +0100 Subject: [PATCH 12/42] float --- docs/source/docs/floats.blade.md | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/floats.blade.md b/docs/source/docs/floats.blade.md index 87d0548e4..d5b443774 100644 --- a/docs/source/docs/floats.blade.md +++ b/docs/source/docs/floats.blade.md @@ -35,3 +35,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 52ef0b369505c4232db679ece45a4e7952f01243 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:43:34 +0100 Subject: [PATCH 13/42] fonts --- docs/source/docs/fonts.blade.md | 34 +++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md index 78f2659fe..2b6f7373d 100644 --- a/docs/source/docs/fonts.blade.md +++ b/docs/source/docs/fonts.blade.md @@ -30,3 +30,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From cce6d107524e7096731b4dd59b2479b820cc1d40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:45:13 +0100 Subject: [PATCH 14/42] fontWeights --- docs/source/docs/font-weight.blade.md | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md index 8e32b5c8a..51b2a72e0 100644 --- a/docs/source/docs/font-weight.blade.md +++ b/docs/source/docs/font-weight.blade.md @@ -60,3 +60,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no focus, or group-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, + } +} +``` From b0326b8272ed8172f6ac84bc84371b2fe0d2f464 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:47:04 +0100 Subject: [PATCH 15/42] height --- docs/source/docs/height.blade.md | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/height.blade.md b/docs/source/docs/height.blade.md index 26824f247..0f08470fa 100644 --- a/docs/source/docs/height.blade.md +++ b/docs/source/docs/height.blade.md @@ -101,3 +101,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 8300ceebd645e29288737b4d959bf8f41fb7fbf2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:48:07 +0100 Subject: [PATCH 16/42] leading (line-height) --- docs/source/docs/line-height.blade.md | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md index 2f31a286d..e6e2acf89 100644 --- a/docs/source/docs/line-height.blade.md +++ b/docs/source/docs/line-height.blade.md @@ -35,3 +35,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From e244553fa1323ff8c53ce2c3564338e79a2cce0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:49:14 +0100 Subject: [PATCH 17/42] lists --- docs/source/docs/lists.blade.md | 34 +++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md index 86c374a5b..18079cd24 100644 --- a/docs/source/docs/lists.blade.md +++ b/docs/source/docs/lists.blade.md @@ -20,3 +20,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From e39da67220fa5caf91b0af292422fbc0df6ad3a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 18:54:34 +0100 Subject: [PATCH 18/42] spacing (margin, negativeMargin & padding) --- docs/source/docs/spacing.blade.md | 38 +++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md index 57029cad5..fcbb7f3be 100644 --- a/docs/source/docs/spacing.blade.md +++ b/docs/source/docs/spacing.blade.md @@ -45,3 +45,41 @@ For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.m
auto auto (margins only)
+ +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover variants are generated for margin, negative margin and padding utilities. + +You can control which variants are generated for the list utilities by modifying the `margin`, `negativeMargin` and `padding` property in the `modules` section of your Tailwind config file. + +For example, this config will _also_ generate hover and focus variants of the margin utilities, hover variants of the negative margin utilities, and focus variants of the padding utilities: + +```js +{ + // ... + modules: { + // ... + margin: ['responsive', 'hover', 'focus'], + negativeMargin: ['responsive', 'hover'], + padding: ['responsive', 'focus'], + } +} +``` + +### Disabling + +If you aren't using the margin, the negative margin, or padding utilities in your project, you can disable them entirely by setting the `margin`, `negativeMargin` and `padding` property to `false` in the `modules` section of your config file: + +```js +{ + // ... + modules: { + // ... + margin: false, + negativeMargin: false, + padding: false, + } +} +``` From a05bf1f4fd6f556bd13ae82865c799bd70b5e6db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:01:50 +0100 Subject: [PATCH 19/42] maxHeight --- docs/source/docs/max-height.blade.md | 34 ++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/max-height.blade.md b/docs/source/docs/max-height.blade.md index 8071a3142..df91bfe1e 100644 --- a/docs/source/docs/max-height.blade.md +++ b/docs/source/docs/max-height.blade.md @@ -26,3 +26,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 53459c71c4f74dedf645b78f91839edbf99de71f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:01:59 +0100 Subject: [PATCH 20/42] maxWidth --- docs/source/docs/max-width.blade.md | 34 +++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/max-width.blade.md b/docs/source/docs/max-width.blade.md index 7b7b9d90b..a0003e5be 100644 --- a/docs/source/docs/max-width.blade.md +++ b/docs/source/docs/max-width.blade.md @@ -66,3 +66,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From c1a3549ba05b4850302d8e0fb4032283d1ee192a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:02:08 +0100 Subject: [PATCH 21/42] minHeight --- docs/source/docs/min-height.blade.md | 34 ++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/min-height.blade.md b/docs/source/docs/min-height.blade.md index add177599..81f5c5e61 100644 --- a/docs/source/docs/min-height.blade.md +++ b/docs/source/docs/min-height.blade.md @@ -31,3 +31,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From a21ccc3c2d4b8d347ac9df0f7de905c8475d8ecf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:02:15 +0100 Subject: [PATCH 22/42] minWidth --- docs/source/docs/min-width.blade.md | 34 +++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/min-width.blade.md b/docs/source/docs/min-width.blade.md index 86be64906..6646fb1c9 100644 --- a/docs/source/docs/min-width.blade.md +++ b/docs/source/docs/min-width.blade.md @@ -26,3 +26,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 7a47c87d92e48a3be36c9c1468028f84b1f5848d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:03:18 +0100 Subject: [PATCH 23/42] opacity --- docs/source/docs/opacity.blade.md | 32 +++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md index b7793b466..4e0f8bb98 100644 --- a/docs/source/docs/opacity.blade.md +++ b/docs/source/docs/opacity.blade.md @@ -113,3 +113,35 @@ By default Tailwind provides five opacity utilities based on a simple numeric sc + '90': '.9', '100': '1', @endcomponent + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 0edb91a45fe7fee854f59c2c7753d0158e225794 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:04:48 +0100 Subject: [PATCH 24/42] overflow --- docs/source/docs/overflow.blade.md | 34 ++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md index 1d92a5c7d..0353abc5f 100644 --- a/docs/source/docs/overflow.blade.md +++ b/docs/source/docs/overflow.blade.md @@ -219,3 +219,37 @@ For more information about Tailwind's responsive design features, check out the @endslot @endcomponent + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From c9969d808c7f45924b3b14935b0c1ef7e7485be8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:05:41 +0100 Subject: [PATCH 25/42] pointerEvents --- docs/source/docs/pointer-events.blade.md | 34 ++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md index d6da015fe..74a64feb9 100644 --- a/docs/source/docs/pointer-events.blade.md +++ b/docs/source/docs/pointer-events.blade.md @@ -25,3 +25,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From d54ab8035ceef1e01c163545ea4a6d8798d10227 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:07:31 +0100 Subject: [PATCH 26/42] position --- docs/source/docs/positioning.blade.md | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md index 554434052..5aacc9ff6 100644 --- a/docs/source/docs/positioning.blade.md +++ b/docs/source/docs/positioning.blade.md @@ -404,3 +404,37 @@ For more information about Tailwind's responsive design features, check out the @endslot @endcomponent + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 837f288911156f5412cfe569fbb2dfa38a1fe0e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:08:44 +0100 Subject: [PATCH 27/42] shadows --- docs/source/docs/shadows.blade.md | 32 +++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md index 117598cd6..59902f869 100644 --- a/docs/source/docs/shadows.blade.md +++ b/docs/source/docs/shadows.blade.md @@ -135,3 +135,35 @@ If a `default` shadow is provided, it will be used for the non-suffixed `.shadow + '3': '0 8px 16px rgba(0,0,0,0.15)', 'none': 'none', @endcomponent + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 1f22e0cbb6b869cacc8e72e5fcd321fa73887a10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:14:00 +0100 Subject: [PATCH 28/42] textAlign --- docs/source/docs/text-alignment.blade.md | 34 ++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/text-alignment.blade.md b/docs/source/docs/text-alignment.blade.md index 3307b06bb..b9529a4f5 100644 --- a/docs/source/docs/text-alignment.blade.md +++ b/docs/source/docs/text-alignment.blade.md @@ -35,3 +35,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From c98af3c89fc7f7a033f7fb5b964e1c3b2b34f63d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:14:53 +0100 Subject: [PATCH 29/42] textColors --- docs/source/docs/text-color.blade.md | 34 ++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md index 255282216..3be92e5f8 100644 --- a/docs/source/docs/text-color.blade.md +++ b/docs/source/docs/text-color.blade.md @@ -40,3 +40,37 @@ Hover utilities can also be combined with responsive utilities by adding the res ```html ``` + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no focus, or group-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, + } +} +``` From 47c513985a67a36b7a9a64962619dd0d20855947 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:16:16 +0100 Subject: [PATCH 30/42] textSizes --- docs/source/docs/text-sizing.blade.md | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md index 46649ce25..7276c4370 100644 --- a/docs/source/docs/text-sizing.blade.md +++ b/docs/source/docs/text-sizing.blade.md @@ -60,3 +60,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 8f1c253c2e782f69613f2ff17c948e644b2d41ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:17:05 +0100 Subject: [PATCH 31/42] textStyle --- docs/source/docs/text-style.blade.md | 34 ++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md index ae4ffaf50..5292a7536 100644 --- a/docs/source/docs/text-style.blade.md +++ b/docs/source/docs/text-style.blade.md @@ -84,3 +84,37 @@ Hover utilities can also be combined with responsive utilities by adding the res ```html Link ``` + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no focus, or group-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, + } +} +``` From 0d598d1b57d7a74840de1eb5caf84b150c524171 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:19:15 +0100 Subject: [PATCH 32/42] tracking (letter-spacing) --- docs/source/docs/letter-spacing.blade.md | 34 ++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md index af5a523fa..a15d6c8fd 100644 --- a/docs/source/docs/letter-spacing.blade.md +++ b/docs/source/docs/letter-spacing.blade.md @@ -30,3 +30,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 3cd720a72de192439a02ad1081db42cea77784b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:20:22 +0100 Subject: [PATCH 33/42] userSelect --- docs/source/docs/user-select.blade.md | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md index e499039db..aabd39534 100644 --- a/docs/source/docs/user-select.blade.md +++ b/docs/source/docs/user-select.blade.md @@ -25,3 +25,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 25d46a4625ac6c9b14c8c39be714a3eb1ec122c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:21:46 +0100 Subject: [PATCH 34/42] verticalAlign --- docs/source/docs/vertical-alignment.blade.md | 34 ++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md index 25af9d339..dc5c85039 100644 --- a/docs/source/docs/vertical-alignment.blade.md +++ b/docs/source/docs/vertical-alignment.blade.md @@ -45,3 +45,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 0e9046e7533251865e661d14a37eb38e20eb912f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:25:05 +0100 Subject: [PATCH 35/42] visibility --- docs/source/docs/visibility.blade.md | 36 +++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md index d7f89e28a..6c412bb79 100644 --- a/docs/source/docs/visibility.blade.md +++ b/docs/source/docs/visibility.blade.md @@ -42,7 +42,7 @@ Use `.invisible` to hide an element, but still maintain its space. ## Responsive -To apply an overflow utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:overflow-scroll` to an element would apply the `overflow-scroll` utility at medium screen sizes and above. +To apply a visibility utility only at a specific breakpoint, add a `{screen}:` prefix to the existing class name. For example, adding the class `md:invisible` to an element would apply the `invisible` utility at medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @@ -76,3 +76,37 @@ For more information about Tailwind's responsive design features, check out the
@endslot @endcomponent + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 3ac33ab8d304a05d90a7c70ec9c5dc32138b927e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:27:31 +0100 Subject: [PATCH 36/42] whitespace --- .../docs/whitespace-and-wrapping.blade.md | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md index 32dc0dba9..930455a83 100644 --- a/docs/source/docs/whitespace-and-wrapping.blade.md +++ b/docs/source/docs/whitespace-and-wrapping.blade.md @@ -50,8 +50,42 @@ features: ], [ '.truncate', - "overflow: hidden;\ntext-overflow: ellipsis;\nwhite-space", + "overflow: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap", 'Truncate overflowing text with an ellipsis (…) if needed.', ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From e78f6735ab016809b9da4d98a4d461b5ca25cc09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:28:39 +0100 Subject: [PATCH 37/42] width --- docs/source/docs/width.blade.md | 34 +++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/width.blade.md b/docs/source/docs/width.blade.md index 23954527e..e117b4e29 100644 --- a/docs/source/docs/width.blade.md +++ b/docs/source/docs/width.blade.md @@ -156,3 +156,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 5f9762b15a5e1edf4ce4dfa1a8462030f672f461 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 19:29:23 +0100 Subject: [PATCH 38/42] zIndex --- docs/source/docs/z-index.blade.md | 32 +++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/docs/source/docs/z-index.blade.md b/docs/source/docs/z-index.blade.md index af87a556f..6d111a808 100644 --- a/docs/source/docs/z-index.blade.md +++ b/docs/source/docs/z-index.blade.md @@ -154,3 +154,35 @@ By default Tailwind provides six numeric `z-index` utilities and an `auto` utili + '100': 100, 'auto': 'auto', @endcomponent + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From abec784c05d9e3d835dee7ae705318940aea6a5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 21:07:54 +0100 Subject: [PATCH 39/42] resize --- docs/source/docs/resize.blade.md | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md index 67efc21d6..870723113 100644 --- a/docs/source/docs/resize.blade.md +++ b/docs/source/docs/resize.blade.md @@ -36,3 +36,37 @@ features: ], ] ]) + +## Customizing + +### Responsive, Hover, and Focus Variants + +By default, no hover, focus, or group-hover 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, + } +} +``` From 0bc552c24342ccefb245c0fc9ff926e45aa432de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sat, 2 Dec 2017 21:11:14 +0100 Subject: [PATCH 40/42] Fix wording --- docs/source/docs/background-attachment.blade.md | 2 +- docs/source/docs/background-color.blade.md | 2 +- docs/source/docs/background-position.blade.md | 2 +- docs/source/docs/background-repeat.blade.md | 2 +- docs/source/docs/background-size.blade.md | 2 +- docs/source/docs/border-color.blade.md | 2 +- docs/source/docs/border-radius.blade.md | 2 +- docs/source/docs/border-style.blade.md | 2 +- docs/source/docs/border-width.blade.md | 2 +- docs/source/docs/cursor.blade.md | 2 +- docs/source/docs/display.blade.md | 2 +- docs/source/docs/floats.blade.md | 2 +- docs/source/docs/font-weight.blade.md | 2 +- docs/source/docs/fonts.blade.md | 2 +- docs/source/docs/forms.blade.md | 2 +- docs/source/docs/height.blade.md | 2 +- docs/source/docs/letter-spacing.blade.md | 2 +- docs/source/docs/line-height.blade.md | 2 +- docs/source/docs/lists.blade.md | 2 +- docs/source/docs/max-height.blade.md | 2 +- docs/source/docs/max-width.blade.md | 2 +- docs/source/docs/min-height.blade.md | 2 +- docs/source/docs/min-width.blade.md | 2 +- docs/source/docs/opacity.blade.md | 2 +- docs/source/docs/overflow.blade.md | 2 +- docs/source/docs/pointer-events.blade.md | 2 +- docs/source/docs/positioning.blade.md | 2 +- docs/source/docs/resize.blade.md | 2 +- docs/source/docs/shadows.blade.md | 2 +- docs/source/docs/spacing.blade.md | 2 +- docs/source/docs/text-alignment.blade.md | 2 +- docs/source/docs/text-color.blade.md | 2 +- docs/source/docs/text-sizing.blade.md | 2 +- docs/source/docs/text-style.blade.md | 2 +- docs/source/docs/user-select.blade.md | 2 +- docs/source/docs/vertical-alignment.blade.md | 2 +- docs/source/docs/visibility.blade.md | 2 +- docs/source/docs/whitespace-and-wrapping.blade.md | 2 +- docs/source/docs/width.blade.md | 2 +- docs/source/docs/z-index.blade.md | 2 +- 40 files changed, 40 insertions(+), 40 deletions(-) diff --git a/docs/source/docs/background-attachment.blade.md b/docs/source/docs/background-attachment.blade.md index e80e27bd3..45a6deeaa 100644 --- a/docs/source/docs/background-attachment.blade.md +++ b/docs/source/docs/background-attachment.blade.md @@ -35,7 +35,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for background attachment utilities. +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. diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md index 91c9cd7a7..34cc52414 100644 --- a/docs/source/docs/background-color.blade.md +++ b/docs/source/docs/background-color.blade.md @@ -45,7 +45,7 @@ Hover utilities can also be combined with responsive utilities by adding the res ### Responsive, Hover, and Focus Variants -By default, no focus, or group-hover variants are generated for background color utilities. +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. diff --git a/docs/source/docs/background-position.blade.md b/docs/source/docs/background-position.blade.md index 96b3cd451..fc61497ae 100644 --- a/docs/source/docs/background-position.blade.md +++ b/docs/source/docs/background-position.blade.md @@ -65,7 +65,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for background position utilities. +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. diff --git a/docs/source/docs/background-repeat.blade.md b/docs/source/docs/background-repeat.blade.md index 95b22290d..c69ead8b2 100644 --- a/docs/source/docs/background-repeat.blade.md +++ b/docs/source/docs/background-repeat.blade.md @@ -40,7 +40,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for background repeat utilities. +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. diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md index 7d96ea2fb..29dc39269 100644 --- a/docs/source/docs/background-size.blade.md +++ b/docs/source/docs/background-size.blade.md @@ -30,7 +30,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for background size utilities. +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. diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md index 6426f50fa..9333b8ff7 100644 --- a/docs/source/docs/border-color.blade.md +++ b/docs/source/docs/border-color.blade.md @@ -45,7 +45,7 @@ Hover utilities can also be combined with responsive utilities by adding the res ### Responsive, Hover, and Focus Variants -By default, no focus, or group-hover variants are generated for border color utilities. +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. diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md index 87f08a680..14c0413cd 100644 --- a/docs/source/docs/border-radius.blade.md +++ b/docs/source/docs/border-radius.blade.md @@ -369,7 +369,7 @@ By default Tailwind provides five border radius size utilities. You can change, ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for border radius utilities. +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. diff --git a/docs/source/docs/border-style.blade.md b/docs/source/docs/border-style.blade.md index d62b7542e..7397f0ba0 100644 --- a/docs/source/docs/border-style.blade.md +++ b/docs/source/docs/border-style.blade.md @@ -41,7 +41,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for border style utilities. +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. diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md index 3d0a0b749..eff21433a 100644 --- a/docs/source/docs/border-width.blade.md +++ b/docs/source/docs/border-width.blade.md @@ -42,7 +42,7 @@ For example, `.border` would add a `1px` border to all sides of the element, whe ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for border width utilities. +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. diff --git a/docs/source/docs/cursor.blade.md b/docs/source/docs/cursor.blade.md index bc33f4d89..54f8a2833 100644 --- a/docs/source/docs/cursor.blade.md +++ b/docs/source/docs/cursor.blade.md @@ -35,7 +35,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for cursor utilities. +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. diff --git a/docs/source/docs/display.blade.md b/docs/source/docs/display.blade.md index a74c4b35d..f23e9cea5 100644 --- a/docs/source/docs/display.blade.md +++ b/docs/source/docs/display.blade.md @@ -65,7 +65,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for display utilities. +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. diff --git a/docs/source/docs/floats.blade.md b/docs/source/docs/floats.blade.md index d5b443774..59c41d5d5 100644 --- a/docs/source/docs/floats.blade.md +++ b/docs/source/docs/floats.blade.md @@ -40,7 +40,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for float utilities. +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. diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md index 51b2a72e0..e2edbf2d8 100644 --- a/docs/source/docs/font-weight.blade.md +++ b/docs/source/docs/font-weight.blade.md @@ -65,7 +65,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no focus, or group-hover variants are generated for font weight utilities. +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. diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md index 2b6f7373d..20c9bed63 100644 --- a/docs/source/docs/fonts.blade.md +++ b/docs/source/docs/fonts.blade.md @@ -35,7 +35,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for font utilities. +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. diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md index aa4d8a8e6..e4f9e54a7 100644 --- a/docs/source/docs/forms.blade.md +++ b/docs/source/docs/forms.blade.md @@ -42,7 +42,7 @@ Form controls are great candidates for component classes, but just for fun, here ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for form control appearance utilities. +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. diff --git a/docs/source/docs/height.blade.md b/docs/source/docs/height.blade.md index 0f08470fa..fe07b4310 100644 --- a/docs/source/docs/height.blade.md +++ b/docs/source/docs/height.blade.md @@ -106,7 +106,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for height utilities. +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. diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md index a15d6c8fd..295b75ec1 100644 --- a/docs/source/docs/letter-spacing.blade.md +++ b/docs/source/docs/letter-spacing.blade.md @@ -35,7 +35,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for tracking utilities. +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. diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md index e6e2acf89..082e4c379 100644 --- a/docs/source/docs/line-height.blade.md +++ b/docs/source/docs/line-height.blade.md @@ -40,7 +40,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for leading utilities. +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. diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md index 18079cd24..b757ff902 100644 --- a/docs/source/docs/lists.blade.md +++ b/docs/source/docs/lists.blade.md @@ -25,7 +25,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for list utilities. +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. diff --git a/docs/source/docs/max-height.blade.md b/docs/source/docs/max-height.blade.md index df91bfe1e..3456181f1 100644 --- a/docs/source/docs/max-height.blade.md +++ b/docs/source/docs/max-height.blade.md @@ -31,7 +31,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for max height utilities. +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. diff --git a/docs/source/docs/max-width.blade.md b/docs/source/docs/max-width.blade.md index a0003e5be..48cccbbb9 100644 --- a/docs/source/docs/max-width.blade.md +++ b/docs/source/docs/max-width.blade.md @@ -71,7 +71,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for max width utilities. +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. diff --git a/docs/source/docs/min-height.blade.md b/docs/source/docs/min-height.blade.md index 81f5c5e61..bdff1bfb4 100644 --- a/docs/source/docs/min-height.blade.md +++ b/docs/source/docs/min-height.blade.md @@ -36,7 +36,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for min height utilities. +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. diff --git a/docs/source/docs/min-width.blade.md b/docs/source/docs/min-width.blade.md index 6646fb1c9..0a87fc6c2 100644 --- a/docs/source/docs/min-width.blade.md +++ b/docs/source/docs/min-width.blade.md @@ -31,7 +31,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for min width utilities. +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. diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md index 4e0f8bb98..4b5b75cb4 100644 --- a/docs/source/docs/opacity.blade.md +++ b/docs/source/docs/opacity.blade.md @@ -116,7 +116,7 @@ By default Tailwind provides five opacity utilities based on a simple numeric sc ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for opacity utilities. +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. diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md index 0353abc5f..4f803d0ee 100644 --- a/docs/source/docs/overflow.blade.md +++ b/docs/source/docs/overflow.blade.md @@ -224,7 +224,7 @@ For more information about Tailwind's responsive design features, check out the ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for overflow utilities. +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. diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md index 74a64feb9..db33f6e28 100644 --- a/docs/source/docs/pointer-events.blade.md +++ b/docs/source/docs/pointer-events.blade.md @@ -30,7 +30,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for pointer event utilities. +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. diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md index 5aacc9ff6..bd8fbd007 100644 --- a/docs/source/docs/positioning.blade.md +++ b/docs/source/docs/positioning.blade.md @@ -409,7 +409,7 @@ For more information about Tailwind's responsive design features, check out the ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for positioning utilities. +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. diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md index 870723113..70e78d3f4 100644 --- a/docs/source/docs/resize.blade.md +++ b/docs/source/docs/resize.blade.md @@ -41,7 +41,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for resizing utilities. +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. diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md index 59902f869..2ac47aa00 100644 --- a/docs/source/docs/shadows.blade.md +++ b/docs/source/docs/shadows.blade.md @@ -138,7 +138,7 @@ If a `default` shadow is provided, it will be used for the non-suffixed `.shadow ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for shadow utilities. +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. diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md index fcbb7f3be..45bd7123e 100644 --- a/docs/source/docs/spacing.blade.md +++ b/docs/source/docs/spacing.blade.md @@ -50,7 +50,7 @@ For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.m ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for margin, negative margin and padding utilities. +By default, only responsive variants are generated for margin, negative margin and padding utilities. You can control which variants are generated for the list utilities by modifying the `margin`, `negativeMargin` and `padding` property in the `modules` section of your Tailwind config file. diff --git a/docs/source/docs/text-alignment.blade.md b/docs/source/docs/text-alignment.blade.md index b9529a4f5..6afda5845 100644 --- a/docs/source/docs/text-alignment.blade.md +++ b/docs/source/docs/text-alignment.blade.md @@ -40,7 +40,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for text align utilities. +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. diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md index 3be92e5f8..69efd3823 100644 --- a/docs/source/docs/text-color.blade.md +++ b/docs/source/docs/text-color.blade.md @@ -45,7 +45,7 @@ Hover utilities can also be combined with responsive utilities by adding the res ### Responsive, Hover, and Focus Variants -By default, no focus, or group-hover variants are generated for text color utilities. +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. diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md index 7276c4370..6b788b9a2 100644 --- a/docs/source/docs/text-sizing.blade.md +++ b/docs/source/docs/text-sizing.blade.md @@ -65,7 +65,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for text size utilities. +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. diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md index 5292a7536..d0dfb5d19 100644 --- a/docs/source/docs/text-style.blade.md +++ b/docs/source/docs/text-style.blade.md @@ -89,7 +89,7 @@ Hover utilities can also be combined with responsive utilities by adding the res ### Responsive, Hover, and Focus Variants -By default, no focus, or group-hover variants are generated for text style utilities. +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. diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md index aabd39534..df4d1cd7d 100644 --- a/docs/source/docs/user-select.blade.md +++ b/docs/source/docs/user-select.blade.md @@ -30,7 +30,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for user select utilities. +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. diff --git a/docs/source/docs/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md index dc5c85039..b75267864 100644 --- a/docs/source/docs/vertical-alignment.blade.md +++ b/docs/source/docs/vertical-alignment.blade.md @@ -50,7 +50,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for vertical alignment utilities. +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. diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md index 6c412bb79..69ec02f15 100644 --- a/docs/source/docs/visibility.blade.md +++ b/docs/source/docs/visibility.blade.md @@ -81,7 +81,7 @@ For more information about Tailwind's responsive design features, check out the ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for visibility utilities. +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. diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md index 930455a83..d62c157d7 100644 --- a/docs/source/docs/whitespace-and-wrapping.blade.md +++ b/docs/source/docs/whitespace-and-wrapping.blade.md @@ -60,7 +60,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for whitespace & wrapping utilities. +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. diff --git a/docs/source/docs/width.blade.md b/docs/source/docs/width.blade.md index e117b4e29..51105dd9b 100644 --- a/docs/source/docs/width.blade.md +++ b/docs/source/docs/width.blade.md @@ -161,7 +161,7 @@ features: ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for width utilities. +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. diff --git a/docs/source/docs/z-index.blade.md b/docs/source/docs/z-index.blade.md index 6d111a808..66a340e11 100644 --- a/docs/source/docs/z-index.blade.md +++ b/docs/source/docs/z-index.blade.md @@ -157,7 +157,7 @@ By default Tailwind provides six numeric `z-index` utilities and an `auto` utili ### Responsive, Hover, and Focus Variants -By default, no hover, focus, or group-hover variants are generated for z-index utilities. +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. 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 41/42] 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, + } +} +``` From c6013212705f01ceb956b05756aa66dc0a9fa8e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sun, 3 Dec 2017 02:35:38 +0100 Subject: [PATCH 42/42] Extract to partial --- .../_partials/customized-config.blade.php | 3 ++ .../variants-and-disabling.blade.php | 45 +++++++++++++++++++ .../docs/background-attachment.blade.md | 40 ++++------------- docs/source/docs/background-color.blade.md | 41 +++++------------ docs/source/docs/background-position.blade.md | 40 ++++------------- docs/source/docs/background-repeat.blade.md | 40 ++++------------- docs/source/docs/background-size.blade.md | 40 ++++------------- docs/source/docs/border-color.blade.md | 41 +++++------------ docs/source/docs/border-radius.blade.md | 40 ++++------------- docs/source/docs/border-style.blade.md | 40 ++++------------- docs/source/docs/border-width.blade.md | 40 ++++------------- docs/source/docs/cursor.blade.md | 40 ++++------------- docs/source/docs/display.blade.md | 40 ++++------------- .../docs/flexbox-align-content.blade.md | 43 +++++------------- docs/source/docs/flexbox-align-items.blade.md | 43 +++++------------- docs/source/docs/flexbox-align-self.blade.md | 43 +++++------------- docs/source/docs/flexbox-direction.blade.md | 43 +++++------------- docs/source/docs/flexbox-display.blade.md | 43 +++++------------- .../docs/flexbox-flex-grow-shrink.blade.md | 43 +++++------------- .../docs/flexbox-justify-content.blade.md | 43 +++++------------- docs/source/docs/flexbox-wrapping.blade.md | 43 +++++------------- docs/source/docs/floats.blade.md | 40 ++++------------- docs/source/docs/font-weight.blade.md | 40 ++++------------- docs/source/docs/fonts.blade.md | 40 ++++------------- docs/source/docs/forms.blade.md | 40 ++++------------- docs/source/docs/height.blade.md | 40 ++++------------- docs/source/docs/letter-spacing.blade.md | 40 ++++------------- docs/source/docs/line-height.blade.md | 40 ++++------------- docs/source/docs/lists.blade.md | 40 ++++------------- docs/source/docs/max-height.blade.md | 40 ++++------------- docs/source/docs/max-width.blade.md | 40 ++++------------- docs/source/docs/min-height.blade.md | 40 ++++------------- docs/source/docs/min-width.blade.md | 40 ++++------------- docs/source/docs/opacity.blade.md | 40 ++++------------- docs/source/docs/overflow.blade.md | 40 ++++------------- docs/source/docs/pointer-events.blade.md | 40 ++++------------- docs/source/docs/positioning.blade.md | 40 ++++------------- docs/source/docs/resize.blade.md | 40 ++++------------- docs/source/docs/shadows.blade.md | 40 ++++------------- docs/source/docs/text-alignment.blade.md | 40 ++++------------- docs/source/docs/text-color.blade.md | 41 +++++------------ docs/source/docs/text-sizing.blade.md | 40 ++++------------- docs/source/docs/text-style.blade.md | 41 +++++------------ docs/source/docs/user-select.blade.md | 40 ++++------------- docs/source/docs/vertical-alignment.blade.md | 40 ++++------------- docs/source/docs/visibility.blade.md | 40 ++++------------- .../docs/whitespace-and-wrapping.blade.md | 40 ++++------------- docs/source/docs/width.blade.md | 40 ++++------------- docs/source/docs/z-index.blade.md | 40 ++++------------- 49 files changed, 483 insertions(+), 1473 deletions(-) create mode 100644 docs/source/_partials/variants-and-disabling.blade.php 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', + ], +])