wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Extract to partial

Browse source
This commit is contained in:
Michaël De Boey 2017-12-03 02:35:38 +01:00
parent 923a5a22c4
commit c601321270
No known key found for this signature in database
GPG key ID: D14AE6F0880EF592
49 changed files with 483 additions and 1473 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/source/_partials/customized-config.blade.php
View file

@ -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>

45
docs/source/_partials/variants-and-disabling.blade.php Normal file
View file

@ -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

40
docs/source/docs/background-attachment.blade.md
View file

@ -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',
],
])

41
docs/source/docs/background-color.blade.md
View file

@ -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',
],
])

40
docs/source/docs/background-position.blade.md
View file

@ -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',
],
])

40
docs/source/docs/background-repeat.blade.md
View file

@ -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',
],
])

40
docs/source/docs/background-size.blade.md
View file

@ -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',
],
])

41
docs/source/docs/border-color.blade.md
View file

@ -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',
],
])

40
docs/source/docs/border-radius.blade.md
View file

@ -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',
],
])

40
docs/source/docs/border-style.blade.md
View file

@ -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',
],
])

40
docs/source/docs/border-width.blade.md
View file

@ -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',
],
])

40
docs/source/docs/cursor.blade.md
View file

@ -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',
],
])

40
docs/source/docs/display.blade.md
View file

@ -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',
],
])

43
docs/source/docs/flexbox-align-content.blade.md
View file

@ -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 <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the align-content utilities.'
])

43
docs/source/docs/flexbox-align-items.blade.md
View file

@ -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 <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the align-items utilities.'
])

43
docs/source/docs/flexbox-align-self.blade.md
View file

@ -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 <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the align-self utilities.'
])

43
docs/source/docs/flexbox-direction.blade.md
View file

@ -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 <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the flex-direction utilities.'
])

43
docs/source/docs/flexbox-display.blade.md
View file

@ -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 <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the display utilities.'
])

43
docs/source/docs/flexbox-flex-grow-shrink.blade.md
View file

@ -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 <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the flex utilities.'
])

43
docs/source/docs/flexbox-justify-content.blade.md
View file

@ -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 <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the justify-content utilities.'
])

43
docs/source/docs/flexbox-wrapping.blade.md
View file

@ -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 <code>flexbox</code> property will affect what variants are generated for <em>all</em> flexbox modules, not just the flex-wrap utilities.'
])

40
docs/source/docs/floats.blade.md
View file

@ -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',
],
])

40
docs/source/docs/font-weight.blade.md
View file

@ -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',
],
])

40
docs/source/docs/fonts.blade.md
View file

@ -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',
],
])

40
docs/source/docs/forms.blade.md
View file

@ -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',
],
])

40
docs/source/docs/height.blade.md
View file

@ -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',
],
])

40
docs/source/docs/letter-spacing.blade.md
View file

@ -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',
],
])

40
docs/source/docs/line-height.blade.md
View file

@ -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',
],
])

40
docs/source/docs/lists.blade.md
View file

@ -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',
],
])

40
docs/source/docs/max-height.blade.md
View file

@ -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',
],
])

40
docs/source/docs/max-width.blade.md
View file

@ -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',
],
])

40
docs/source/docs/min-height.blade.md
View file

@ -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',
],
])

40
docs/source/docs/min-width.blade.md
View file

@ -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',
],
])

40
docs/source/docs/opacity.blade.md
View file

@ -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',
],
])

40
docs/source/docs/overflow.blade.md
View file

@ -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',
],
])

40
docs/source/docs/pointer-events.blade.md
View file

@ -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',
],
])

40
docs/source/docs/positioning.blade.md
View file

@ -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',
],
])

40
docs/source/docs/resize.blade.md
View file

@ -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',
],
])

40
docs/source/docs/shadows.blade.md
View file

@ -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',
],
])

40
docs/source/docs/text-alignment.blade.md
View file

@ -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',
],
])

41
docs/source/docs/text-color.blade.md
View file

@ -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',
],
])

40
docs/source/docs/text-sizing.blade.md
View file

@ -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',
],
])

41
docs/source/docs/text-style.blade.md
View file

@ -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',
],
])

40
docs/source/docs/user-select.blade.md
View file

@ -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',
],
])

40
docs/source/docs/vertical-alignment.blade.md
View file

@ -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',
],
])

40
docs/source/docs/visibility.blade.md
View file

@ -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',
],
])

40
docs/source/docs/whitespace-and-wrapping.blade.md
View file

@ -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',
],
])

40
docs/source/docs/width.blade.md
View file

@ -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',
],
])

40
docs/source/docs/z-index.blade.md
View file

@ -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',
],
])