Merge branch 'add-variants-section-to-docs' of https://github.com/MichaelDeBoey/tailwindcss into MichaelDeBoey-add-variants-section-to-docs

docs/source/_partials/customized-config.blade.php

@@ -10,6 +10,9 @@
       if (starts_with($line, '-')) {
         return '<div class="text-grey"><span class="text-grey">-</span>&nbsp;&nbsp;&nbsp;' . e(trim(substr($line, 1))) . '</div>';
       }
+      if (starts_with($line, '//')) {
+        return '<div class="text-grey-light">&nbsp;&nbsp;&nbsp;&nbsp;' . e(trim($line)) . '</div>';
+      }
       return '<div class="text-grey-darker">&nbsp;&nbsp;&nbsp;&nbsp;' . e(trim($line)) . '</div>';
     })->implode("\n") !!}</div>
     <div class="whitespace-pre text-grey-dark">  }</div>

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
+
+<h3>Responsive, Hover, and Focus Variants</h3>
+
+<p>By default, {{ $whichVariants }} variants are generated for {{ $utility['name'] }} utilities.</p>
+
+<p>You can control which variants are generated for the {{ $utility['name'] }} utilities by modifying the <code>{{ $utility['property'] }}</code> property in the <code>modules</code> section of your Tailwind config file.</p>
+
+<p>For example, this config will <em>also</em> generate {{ $extraVariants }} variants:</p>
+
+@component('_partials.customized-config', ['key' => 'modules'])
+  // ...
+- {{ $utility['property'] }}: [{{$currentVariants}}],
++ {{ $utility['property'] }}: ['responsive', 'hover', 'focus'],
+@endcomponent
+
+@isset($extraMessage)
+    <p>{!! $extraMessage !!}</p>
+@endif
+
+<h3>Disabling</h3>
+
+<p>If you aren't using the {{ $utility['name'] }} utilities in your project, you can disable them entirely by setting the <code>{{ $utility['property'] }}</code> property to <code>false</code> in the <code>modules</code> section of your config file:</p>
+
+@component('_partials.customized-config', ['key' => 'modules'])
+  // ...
+- {{ $utility['property'] }}: [{{$currentVariants}}],
++ {{ $utility['property'] }}: false,
+@endcomponent

docs/source/docs/background-attachment.blade.md

@@ -30,3 +30,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'background attachment',
+        'property' => 'backgroundAttachment',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/background-color.blade.md

@@ -40,3 +40,16 @@ Hover utilities can also be combined with responsive utilities by adding the res
 ```html
 <button class="... md:bg-orange md:hover:bg-red ...">Button</button>
 ```
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'background color',
+        'property' => 'backgroundColors',
+    ],
+    'variants' => [
+        'responsive',
+        'hover',
+    ],
+])

docs/source/docs/background-position.blade.md

@@ -60,3 +60,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'background position',
+        'property' => 'backgroundPosition',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/background-repeat.blade.md

@@ -34,4 +34,16 @@ features:
       'Repeat the background image only vertically.',
     ],
   ]
-])
+])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'background repeat',
+        'property' => 'backgroundRepeat',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/background-size.blade.md

@@ -25,3 +25,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'background size',
+        'property' => 'backgroundSize',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/border-color.blade.md

@@ -40,3 +40,16 @@ Hover utilities can also be combined with responsive utilities by adding the res
 ```html
 <button class="... md:border-blue md:hover:border-red ...">Button</button>
 ```
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'border color',
+        'property' => 'borderColors',
+    ],
+    'variants' => [
+        'responsive',
+        'hover',
+    ],
+])

docs/source/docs/border-radius.blade.md

@@ -366,3 +366,13 @@ By default Tailwind provides five border radius size utilities. You can change,
 - 'full': '9999px',
 + 'large': '12px',
 @endcomponent
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'border radius',
+        'property' => 'borderRadius',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/border-style.blade.md

@@ -35,3 +35,16 @@ features:
     ],
   ]
 ])
+
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'border style',
+        'property' => 'borderStyle',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/border-width.blade.md

@@ -37,3 +37,15 @@ For example, `.border` would add a `1px` border to all sides of the element, whe
     <div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>
   </div>
 </div>
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'border width',
+        'property' => 'borderWidths',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/cursor.blade.md

@@ -30,3 +30,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'cursor',
+        'property' => 'cursor',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/display.blade.md

@@ -60,3 +60,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'display',
+        'property' => 'display',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

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

@@ -267,3 +267,16 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'flexbox',
+        'property' => 'flexbox',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+    'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the align-content utilities.'
+])

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

@@ -147,3 +147,16 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'flexbox',
+        'property' => 'flexbox',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+    'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the align-items utilities.'
+])

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

@@ -149,3 +149,16 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'flexbox',
+        'property' => 'flexbox',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+    'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the align-self utilities.'
+])

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

@@ -130,3 +130,16 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'flexbox',
+        'property' => 'flexbox',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+    'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the flex-direction utilities.'
+])

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

@@ -96,3 +96,16 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'flexbox',
+        'property' => 'flexbox',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+    'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the display utilities.'
+])

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

@@ -368,3 +368,16 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'flexbox',
+        'property' => 'flexbox',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+    'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the flex utilities.'
+])

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

@@ -147,3 +147,16 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'flexbox',
+        'property' => 'flexbox',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+    'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the justify-content utilities.'
+])

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

@@ -161,3 +161,16 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'flexbox',
+        'property' => 'flexbox',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+    'extraMessage' => 'Note that modifying the <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the flex-wrap utilities.'
+])

docs/source/docs/floats.blade.md

@@ -35,3 +35,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'float',
+        'property' => 'float',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/font-weight.blade.md

@@ -60,3 +60,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'font weight',
+        'property' => 'fontWeights',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/fonts.blade.md

@@ -30,3 +30,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'font',
+        'property' => 'fonts',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/forms.blade.md

@@ -37,3 +37,15 @@ Form controls are great candidates for component classes, but just for fun, here
   </div>
 </div>
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'form control appearance',
+        'property' => 'appearance',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/height.blade.md

@@ -101,3 +101,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'height',
+        'property' => 'height',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/letter-spacing.blade.md

@@ -30,3 +30,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'tracking',
+        'property' => 'tracking',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/line-height.blade.md

@@ -35,3 +35,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'leading',
+        'property' => 'leading',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/lists.blade.md

@@ -20,3 +20,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'list',
+        'property' => 'lists',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/max-height.blade.md

@@ -26,3 +26,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'max-height',
+        'property' => 'maxHeight',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/max-width.blade.md

@@ -66,3 +66,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'max-width',
+        'property' => 'maxWidth',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/min-height.blade.md

@@ -31,3 +31,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'min-height',
+        'property' => 'minHeight',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/min-width.blade.md

@@ -26,3 +26,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'min-width',
+        'property' => 'minWidth',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/opacity.blade.md

@@ -113,3 +113,13 @@ By default Tailwind provides five opacity utilities based on a simple numeric sc
 + '90': '.9',
   '100': '1',
 @endcomponent
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'opacity',
+        'property' => 'opacity',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/overflow.blade.md

@@ -219,3 +219,15 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'overflow',
+        'property' => 'overflow',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/pointer-events.blade.md

@@ -25,3 +25,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'pointer event',
+        'property' => 'pointerEvents',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/positioning.blade.md

@@ -404,3 +404,15 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'positioning',
+        'property' => 'position',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/resize.blade.md

@@ -36,3 +36,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'resizing',
+        'property' => 'resize',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/shadows.blade.md

@@ -135,3 +135,13 @@ 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
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'shadow',
+        'property' => 'shadows',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

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
     <div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">auto</code> auto <span class="text-slate-light text-xs">(margins only)</span></div>
   </div>
 </div>
+
+## Customizing
+
+### Responsive, Hover, and Focus Variants
+
+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.
+
+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,
+    }
+}
+```

docs/source/docs/text-alignment.blade.md

@@ -35,3 +35,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'text alignment',
+        'property' => 'textAlign',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/text-color.blade.md

@@ -40,3 +40,16 @@ Hover utilities can also be combined with responsive utilities by adding the res
 ```html
 <button class="... md:text-blue md:hover:text-red ...">Button</button>
 ```
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'text color',
+        'property' => 'textColors',
+    ],
+    'variants' => [
+        'responsive',
+        'hover',
+    ],
+])

docs/source/docs/text-sizing.blade.md

@@ -60,3 +60,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'text sizing',
+        'property' => 'textSizes',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/text-style.blade.md

@@ -84,3 +84,16 @@ Hover utilities can also be combined with responsive utilities by adding the res
 ```html
 <a href="#" class="... md:no-underline md:hover:underline ...">Link</a>
 ```
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'text style',
+        'property' => 'textStyle',
+    ],
+    'variants' => [
+        'responsive',
+        'hover',
+    ],
+])

docs/source/docs/user-select.blade.md

@@ -25,3 +25,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'user-select',
+        'property' => 'userSelect',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/vertical-alignment.blade.md

@@ -45,3 +45,15 @@ features:
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'vertical alignment',
+        'property' => 'verticalAlign',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

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,15 @@ For more information about Tailwind's responsive design features, check out the
 <div class="none:visible sm:invisible md:visible lg:invisible xl:visible ..."></div>
 @endslot
 @endcomponent
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'visibility',
+        'property' => 'visibility',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/whitespace-and-wrapping.blade.md

@@ -50,8 +50,20 @@ features:
     ],
     [
       '.truncate',
-      "overflow: hidden;\ntext-overflow: ellipsis;\nwhite-space",
+      "overflow: hidden;\ntext-overflow: ellipsis;\nwhite-space: nowrap",
       'Truncate overflowing text with an ellipsis (<code>…</code>) if needed.',
     ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'whitespace & wrapping',
+        'property' => 'whitespace',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/width.blade.md

@@ -156,3 +156,15 @@ features:
       ],
   ]
 ])
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'width',
+        'property' => 'width',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])

docs/source/docs/z-index.blade.md

@@ -154,3 +154,13 @@ By default Tailwind provides six numeric `z-index` utilities and an `auto` utili
 + '100': 100,
   'auto': 'auto',
 @endcomponent
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'z-index',
+        'property' => 'zIndex',
+    ],
+    'variants' => [
+        'responsive',
+    ],
+])