Skip to content

Commit 923a5a2

Browse files
MichaelDeBoeyMichaelDeBoey
committed
Add variants section to flexbox docs
1 parent 0bc552c commit 923a5a2

8 files changed

+288
-0
lines changed

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,3 +267,39 @@ For more information about Tailwind's responsive design features, check out the
267267
</div>
268268
@endslot
269269
@endcomponent
270+
271+
## Customizing
272+
273+
### Responsive, Hover, and Focus Variants
274+
275+
By default, only responsive variants are generated for flexbox utilities.
276+
277+
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.
278+
279+
For example, this config will _also_ generate hover and focus variants:
280+
281+
```js
282+
{
283+
// ...
284+
modules: {
285+
// ...
286+
flexbox: ['responsive', 'hover', 'focus'],
287+
}
288+
}
289+
```
290+
291+
Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the align-content utilities.
292+
293+
### Disabling
294+
295+
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:
296+
297+
```js
298+
{
299+
// ...
300+
modules: {
301+
// ...
302+
flexbox: false,
303+
}
304+
}
305+
```

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,39 @@ For more information about Tailwind's responsive design features, check out the
147147
</div>
148148
@endslot
149149
@endcomponent
150+
151+
## Customizing
152+
153+
### Responsive, Hover, and Focus Variants
154+
155+
By default, only responsive variants are generated for flexbox utilities.
156+
157+
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.
158+
159+
For example, this config will _also_ generate hover and focus variants:
160+
161+
```js
162+
{
163+
// ...
164+
modules: {
165+
// ...
166+
flexbox: ['responsive', 'hover', 'focus'],
167+
}
168+
}
169+
```
170+
171+
Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the align-items utilities.
172+
173+
### Disabling
174+
175+
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:
176+
177+
```js
178+
{
179+
// ...
180+
modules: {
181+
// ...
182+
flexbox: false,
183+
}
184+
}
185+
```

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,3 +149,39 @@ For more information about Tailwind's responsive design features, check out the
149149
</div>
150150
@endslot
151151
@endcomponent
152+
153+
## Customizing
154+
155+
### Responsive, Hover, and Focus Variants
156+
157+
By default, only responsive variants are generated for flexbox utilities.
158+
159+
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.
160+
161+
For example, this config will _also_ generate hover and focus variants:
162+
163+
```js
164+
{
165+
// ...
166+
modules: {
167+
// ...
168+
flexbox: ['responsive', 'hover', 'focus'],
169+
}
170+
}
171+
```
172+
173+
Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the align-self utilities.
174+
175+
### Disabling
176+
177+
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:
178+
179+
```js
180+
{
181+
// ...
182+
modules: {
183+
// ...
184+
flexbox: false,
185+
}
186+
}
187+
```

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,39 @@ For more information about Tailwind's responsive design features, check out the
130130
</div>
131131
@endslot
132132
@endcomponent
133+
134+
## Customizing
135+
136+
### Responsive, Hover, and Focus Variants
137+
138+
By default, only responsive variants are generated for flexbox utilities.
139+
140+
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.
141+
142+
For example, this config will _also_ generate hover and focus variants:
143+
144+
```js
145+
{
146+
// ...
147+
modules: {
148+
// ...
149+
flexbox: ['responsive', 'hover', 'focus'],
150+
}
151+
}
152+
```
153+
154+
Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the flex-direction utilities.
155+
156+
### Disabling
157+
158+
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:
159+
160+
```js
161+
{
162+
// ...
163+
modules: {
164+
// ...
165+
flexbox: false,
166+
}
167+
}
168+
```

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,39 @@ For more information about Tailwind's responsive design features, check out the
9696
</div>
9797
@endslot
9898
@endcomponent
99+
100+
## Customizing
101+
102+
### Responsive, Hover, and Focus Variants
103+
104+
By default, only responsive variants are generated for flexbox utilities.
105+
106+
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.
107+
108+
For example, this config will _also_ generate hover and focus variants:
109+
110+
```js
111+
{
112+
// ...
113+
modules: {
114+
// ...
115+
flexbox: ['responsive', 'hover', 'focus'],
116+
}
117+
}
118+
```
119+
120+
Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the display utilities.
121+
122+
### Disabling
123+
124+
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:
125+
126+
```js
127+
{
128+
// ...
129+
modules: {
130+
// ...
131+
flexbox: false,
132+
}
133+
}
134+
```

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -368,3 +368,39 @@ For more information about Tailwind's responsive design features, check out the
368368
</div>
369369
@endslot
370370
@endcomponent
371+
372+
## Customizing
373+
374+
### Responsive, Hover, and Focus Variants
375+
376+
By default, only responsive variants are generated for flexbox utilities.
377+
378+
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.
379+
380+
For example, this config will _also_ generate hover and focus variants:
381+
382+
```js
383+
{
384+
// ...
385+
modules: {
386+
// ...
387+
flexbox: ['responsive', 'hover', 'focus'],
388+
}
389+
}
390+
```
391+
392+
Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the flex utilities.
393+
394+
### Disabling
395+
396+
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:
397+
398+
```js
399+
{
400+
// ...
401+
modules: {
402+
// ...
403+
flexbox: false,
404+
}
405+
}
406+
```

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,3 +147,39 @@ For more information about Tailwind's responsive design features, check out the
147147
</div>
148148
@endslot
149149
@endcomponent
150+
151+
## Customizing
152+
153+
### Responsive, Hover, and Focus Variants
154+
155+
By default, only responsive variants are generated for flexbox utilities.
156+
157+
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.
158+
159+
For example, this config will _also_ generate hover and focus variants:
160+
161+
```js
162+
{
163+
// ...
164+
modules: {
165+
// ...
166+
flexbox: ['responsive', 'hover', 'focus'],
167+
}
168+
}
169+
```
170+
171+
Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the justify-content utilities.
172+
173+
### Disabling
174+
175+
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:
176+
177+
```js
178+
{
179+
// ...
180+
modules: {
181+
// ...
182+
flexbox: false,
183+
}
184+
}
185+
```

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,3 +161,39 @@ For more information about Tailwind's responsive design features, check out the
161161
</div>
162162
@endslot
163163
@endcomponent
164+
165+
## Customizing
166+
167+
### Responsive, Hover, and Focus Variants
168+
169+
By default, only responsive variants are generated for flexbox utilities.
170+
171+
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.
172+
173+
For example, this config will _also_ generate hover and focus variants:
174+
175+
```js
176+
{
177+
// ...
178+
modules: {
179+
// ...
180+
flexbox: ['responsive', 'hover', 'focus'],
181+
}
182+
}
183+
```
184+
185+
Note that modifying the `flexbox` property will affect what variants are generated for _all_ flexbox modules, not just the flex-wrap utilities.
186+
187+
### Disabling
188+
189+
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:
190+
191+
```js
192+
{
193+
// ...
194+
modules: {
195+
// ...
196+
flexbox: false,
197+
}
198+
}
199+
```

0 commit comments

Comments
 (0)