+
{{ $slot }}
-
-
{{ e($code ?? $slot) }}
+
+
{{ e($code ?? $slot) }}
diff --git a/docs/source/styles/flexbox.blade.md b/docs/source/styles/flexbox.blade.md
new file mode 100644
index 000000000..3a1845e45
--- /dev/null
+++ b/docs/source/styles/flexbox.blade.md
@@ -0,0 +1,698 @@
+---
+extends: _layouts.markdown
+title: "Flexbox"
+---
+
+# Flexbox
+
+
+
+Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
+
+## Display
+
+### Flex
+
+Use `.flex` to create a block-level flex container:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Inline flex
+
+Use `.inline-flex` to create an inline flex container:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+---
+
+## Flex Direction
+
+### Row
+
+Use `.flex-row` to position flex items horizontally in the same direction as text *(this is also the default behavior)*:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Row reversed
+
+Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Column
+
+Use `.flex-col` to position flex items vertically:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Column reversed
+
+Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+---
+
+## Flex Wrapping
+
+### No wrapping
+
+Use `.flex-nowrap` to prevent flex items from wrapping *(this is also the default behavior)*:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Wrap normally
+
+Use `.flex-wrap` to allow flex items to wrap:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Wrap reversed
+
+Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+---
+
+## Justify Content
+
+### Start
+
+Use `.justify-start` to justify items against the start of the flex container's main axis *(this is also the default behavior)*:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### End
+
+Use `.justify-end` to justify items against the end of the flex container's main axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Center
+
+Use `.justify-center` to justify items along the center of the flex container's main axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Space between
+
+Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Space around
+
+Use `.justify-around` to justify items along the flex container's main axis such that there is an equal amount of space around each item:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+---
+
+## Align Items
+
+### Stretch
+
+Use `.items-stretch` to stretch items to fill the flex container's cross axis *(this is also the default behavior)*:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Start
+
+Use `.items-start` to align items to the start of the flex container's cross axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### End
+
+Use `.items-end` to align items to the end of the flex container's cross axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Center
+
+Use `.items-center` to align items along the center of the flex container's cross axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Baseline
+
+Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+---
+
+## Align Content
+
+### Start
+
+Use `.content-start` to pack lines in a flex container against the start of the main axis *(this is also the default behavior)*:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Center
+
+Use `.content-center` to pack lines in a flex container in the center of the main axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### End
+
+Use `.content-end` to pack lines in a flex container against the end of the main axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Space between
+
+Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Space around
+
+Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+---
+
+## Flex
+
+### 1
+
+Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size:
+
+@component('_partials.code-sample')
+
Default behavior
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+
With .flex-1
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+
+@slot('code')
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+@endslot
+@endcomponent
+
+### Auto
+
+Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it's initial size:
+
+@component('_partials.code-sample')
+
Default behavior
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+
With .flex-auto
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+
+@slot('code')
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+@endslot
+@endcomponent
+
+### None
+
+Use `.flex-none` to prevent a flex item from growing or shrinking:
+
+@component('_partials.code-sample')
+
+
+ Item that can grow or shrink if needed
+
+
+ Item that cannot grow or shrink
+
+
+ Item that can grow or shrink if needed
+
+
+@endcomponent
+
+### Initial
+
+Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size *(this is also the default behavior)*:
+
+@component('_partials.code-sample')
+
Items don't grow when there's extra space
+
+
+ Short
+
+
+ Medium length
+
+
+
+
Items shrink if possible when needed
+
+
+ Short
+
+
+ Medium length
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
+
+
+
+@slot('code')
+
+
+ Short
+
+
+ Medium length
+
+
+
+
+
+ Short
+
+
+ Medium length
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
+
+
+@endslot
+@endcomponent
+
+---
+
+## Flex Grow
+
+### Grow
+
+Use `.flex-grow` to allow a flex item to grow to fill any available space:
+
+@component('_partials.code-sample')
+
+
+ Content that cannot flex
+
+
+ Item that will grow
+
+
+ Content that cannot flex
+
+
+@endcomponent
+
+### Don't grow
+
+Use `.flex-no-grow` to prevent a flex item from growing:
+
+@component('_partials.code-sample')
+
+
+ Will grow
+
+
+ Will not grow
+
+
+ Will grow
+
+
+@endcomponent
+
+---
+
+## Flex shrink
+
+### Shrink
+
+Use `.flex-shrink` to allow a flex item to shrink if needed:
+
+@component('_partials.code-sample')
+
+
+ Longer content that cannot flex
+
+
+ Item that will shrink even if it causes the content to wrap
+
+
+ Longer content that cannot flex
+
+
+@endcomponent
+
+### Don't shrink
+
+Use `.flex-no-shrink` to prevent a flex item from shrinking:
+
+@component('_partials.code-sample')
+
+
+ Item that can shrink if needed
+
+
+ Item that cannot shrink below it's initial size
+
+
+ Item that can shrink if needed
+
+
+@endcomponent
+
+---
+
+## Align Self
+
+### Start
+
+Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### End
+
+Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Center
+
+Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+### Stretch
+
+Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value:
+
+@component('_partials.code-sample')
+
+@endcomponent
diff --git a/docs/source/styles/flexbox.md b/docs/source/styles/flexbox.md
deleted file mode 100644
index 59ee194fe..000000000
--- a/docs/source/styles/flexbox.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-extends: _layouts.markdown
-title: "Flexbox"
----
-
-# Flexbox
-
-
diff --git a/docs/source/styles/flexbox/align-content.blade.md b/docs/source/styles/flexbox/align-content.blade.md
new file mode 100644
index 000000000..3f9ce072d
--- /dev/null
+++ b/docs/source/styles/flexbox/align-content.blade.md
@@ -0,0 +1,136 @@
+---
+extends: _layouts.markdown
+title: "Flexbox"
+---
+
+
Flexbox
+
+# Align Content
+
+
+
+Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
+
+
Start Default
+
+Use `.content-start` to pack lines in a flex container against the start of the main axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Center
+
+Use `.content-center` to pack lines in a flex container in the center of the main axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## End
+
+Use `.content-end` to pack lines in a flex container against the end of the main axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Space between
+
+Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Space around
+
+Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line:
+
+@component('_partials.code-sample')
+
+@endcomponent
diff --git a/docs/source/styles/flexbox/align-items.blade.md b/docs/source/styles/flexbox/align-items.blade.md
new file mode 100644
index 000000000..f535345a4
--- /dev/null
+++ b/docs/source/styles/flexbox/align-items.blade.md
@@ -0,0 +1,77 @@
+---
+extends: _layouts.markdown
+title: "Flexbox"
+---
+
+
Flexbox
+
+# Align Items
+
+
+
+Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
+
+
Stretch Default
+
+Use `.items-stretch` to stretch items to fill the flex container's cross axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Start
+
+Use `.items-start` to align items to the start of the flex container's cross axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Center
+
+Use `.items-center` to align items along the center of the flex container's cross axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## End
+
+Use `.items-end` to align items to the end of the flex container's cross axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+
+## Baseline
+
+Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align:
+
+@component('_partials.code-sample')
+
+@endcomponent
diff --git a/docs/source/styles/flexbox/align-self.blade.md b/docs/source/styles/flexbox/align-self.blade.md
new file mode 100644
index 000000000..a38db64ec
--- /dev/null
+++ b/docs/source/styles/flexbox/align-self.blade.md
@@ -0,0 +1,76 @@
+---
+extends: _layouts.markdown
+title: "Flexbox"
+---
+
+
Flexbox
+
+# Align Self
+
+
+
+Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
+
+
Auto Default
+
+Use `.self-auto` to align an item based on the flex container's `align-items` value:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Start
+
+Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Center
+
+Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## End
+
+Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Stretch
+
+Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value:
+
+@component('_partials.code-sample')
+
+@endcomponent
diff --git a/docs/source/styles/flexbox/direction.blade.md b/docs/source/styles/flexbox/direction.blade.md
new file mode 100644
index 000000000..121869bca
--- /dev/null
+++ b/docs/source/styles/flexbox/direction.blade.md
@@ -0,0 +1,64 @@
+---
+extends: _layouts.markdown
+title: "Flexbox"
+---
+
+
Flexbox
+
+# Flex Direction
+
+
+
+Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
+
+
Row Default
+
+Use `.flex-row` to position flex items horizontally in the same direction as text:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Row reversed
+
+Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Column
+
+Use `.flex-col` to position flex items vertically:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Column reversed
+
+Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
+
+@component('_partials.code-sample')
+
+@endcomponent
diff --git a/docs/source/styles/flexbox/display.blade.md b/docs/source/styles/flexbox/display.blade.md
new file mode 100644
index 000000000..327a58376
--- /dev/null
+++ b/docs/source/styles/flexbox/display.blade.md
@@ -0,0 +1,40 @@
+---
+extends: _layouts.markdown
+title: "Display – Flexbox"
+---
+
+
Flexbox
+
+# Display
+
+
+
+Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
+
+## Flex
+
+Use `.flex` to create a block-level flex container:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Inline flex
+
+Use `.inline-flex` to create an inline flex container:
+
+@component('_partials.code-sample')
+
+@endcomponent
diff --git a/docs/source/styles/flexbox/flex-grow-shrink.blade.md b/docs/source/styles/flexbox/flex-grow-shrink.blade.md
new file mode 100644
index 000000000..4407ad10a
--- /dev/null
+++ b/docs/source/styles/flexbox/flex-grow-shrink.blade.md
@@ -0,0 +1,248 @@
+---
+extends: _layouts.markdown
+title: "Flexbox"
+---
+
+
Flexbox
+
+# Flex, Grow, & Shrink
+
+
+
+Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
+
+
Initial Default
+
+Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size:
+
+@component('_partials.code-sample')
+
Items don't grow when there's extra space
+
+
+ Short
+
+
+ Medium length
+
+
+
+
Items shrink if possible when needed
+
+
+ Short
+
+
+ Medium length
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
+
+
+
+@slot('code')
+
+
+ Short
+
+
+ Medium length
+
+
+
+
+
+ Short
+
+
+ Medium length
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
+
+
+@endslot
+@endcomponent
+
+## Flex 1
+
+Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size:
+
+@component('_partials.code-sample')
+
Default behavior
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+
With .flex-1
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+
+@slot('code')
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+@endslot
+@endcomponent
+
+## Auto
+
+Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it's initial size:
+
+@component('_partials.code-sample')
+
Default behavior
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+
With .flex-auto
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+
+@slot('code')
+
+
+ Short
+
+
+ Medium length
+
+
+ Significantly larger amount of content
+
+
+@endslot
+@endcomponent
+
+## None
+
+Use `.flex-none` to prevent a flex item from growing or shrinking:
+
+@component('_partials.code-sample')
+
+
+ Item that can grow or shrink if needed
+
+
+ Item that cannot grow or shrink
+
+
+ Item that can grow or shrink if needed
+
+
+@endcomponent
+
+## Grow
+
+Use `.flex-grow` to allow a flex item to grow to fill any available space:
+
+@component('_partials.code-sample')
+
+
+ Content that cannot flex
+
+
+ Item that will grow
+
+
+ Content that cannot flex
+
+
+@endcomponent
+
+## Don't grow
+
+Use `.flex-no-grow` to prevent a flex item from growing:
+
+@component('_partials.code-sample')
+
+
+ Will grow
+
+
+ Will not grow
+
+
+ Will grow
+
+
+@endcomponent
+
+## Shrink
+
+Use `.flex-shrink` to allow a flex item to shrink if needed:
+
+@component('_partials.code-sample')
+
+
+ Longer content that cannot flex
+
+
+ Item that will shrink even if it causes the content to wrap
+
+
+ Longer content that cannot flex
+
+
+@endcomponent
+
+## Don't shrink
+
+Use `.flex-no-shrink` to prevent a flex item from shrinking:
+
+@component('_partials.code-sample')
+
+
+ Item that can shrink if needed
+
+
+ Item that cannot shrink below it's initial size
+
+
+ Item that can shrink if needed
+
+
+@endcomponent
diff --git a/docs/source/styles/flexbox/justify-content.blade.md b/docs/source/styles/flexbox/justify-content.blade.md
new file mode 100644
index 000000000..4e1df21e6
--- /dev/null
+++ b/docs/source/styles/flexbox/justify-content.blade.md
@@ -0,0 +1,77 @@
+---
+extends: _layouts.markdown
+title: "Flexbox"
+---
+
+
Flexbox
+
+# Justify Content
+
+
+
+Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
+
+
Start Default
+
+Use `.justify-start` to justify items against the start of the flex container's main axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Center
+
+Use `.justify-center` to justify items along the center of the flex container's main axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## End
+
+Use `.justify-end` to justify items against the end of the flex container's main axis:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+
+## Space between
+
+Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Space around
+
+Use `.justify-around` to justify items along the flex container's main axis such that there is an equal amount of space around each item:
+
+@component('_partials.code-sample')
+
+@endcomponent
diff --git a/docs/source/styles/flexbox/wrapping.blade.md b/docs/source/styles/flexbox/wrapping.blade.md
new file mode 100644
index 000000000..62f31811c
--- /dev/null
+++ b/docs/source/styles/flexbox/wrapping.blade.md
@@ -0,0 +1,70 @@
+---
+extends: _layouts.markdown
+title: "Flexbox"
+---
+
+
Flexbox
+
+# Flex Wrapping
+
+
+
+Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
+
+
Don't wrap Default
+
+Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Wrap normally
+
+Use `.flex-wrap` to allow flex items to wrap:
+
+@component('_partials.code-sample')
+
+@endcomponent
+
+## Wrap reversed
+
+Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
+
+@component('_partials.code-sample')
+
+@endcomponent
diff --git a/docs/tailwind.js b/docs/tailwind.js
index 218b3a472..4a2681f78 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -80,7 +80,7 @@ module.exports = {
},
text: {
fonts: {
- 'sans': 'museo-sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
+ 'sans': 'Proxima Nova, proxima-nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
},
@@ -96,7 +96,7 @@ module.exports = {
'4xl': '2.875rem', // 46px
},
weights: {
- 'normal': 300,
+ 'normal': 400,
'semibold': 500,
'bold': 700,
},
@@ -109,7 +109,7 @@ module.exports = {
tracking: {
'tight': '-0.05em',
'normal': '0',
- 'wide': '0.1em',
+ 'wide': '0.05em',
},
colors: {
...colors
@@ -241,7 +241,8 @@ module.exports = {
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
- '16': '4rem'
+ '16': '4rem',
+ '80': '20rem',
},
negativeMargin: {
'px': '1px',