diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less index a8892c451..8aa4077d8 100644 --- a/docs/source/_assets/less/markdown.less +++ b/docs/source/_assets/less/markdown.less @@ -58,7 +58,7 @@ @apply .leading-none; @apply .text-slate-darker; @apply .font-semibold; - @apply .text-3xl; + @apply .text-4xl; } > h2, h2& { diff --git a/docs/source/styles/flexbox/align-content.blade.md b/docs/source/styles/flexbox/align-content.blade.md index ee3aa00ca..2d30cd5c9 100644 --- a/docs/source/styles/flexbox/align-content.blade.md +++ b/docs/source/styles/flexbox/align-content.blade.md @@ -6,15 +6,16 @@ category: "Flexbox" # Align Content -
- Usage - Responsive - Customizing +
+ Utilities for controlling how lines are positioned in multi-line flex containers.
-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. +
+ Usage + Responsive +
-

Start Default

+### Start Default Use `.content-start` to pack lines in a flex container against the start of the main axis: @@ -38,7 +39,7 @@ Use `.content-start` to pack lines in a flex container against the start of the
@endcomponent -## Center +### Center Use `.content-center` to pack lines in a flex container in the center of the main axis: @@ -62,7 +63,7 @@ Use `.content-center` to pack lines in a flex container in the center of the mai @endcomponent -## End +### End Use `.content-end` to pack lines in a flex container against the end of the main axis: @@ -86,7 +87,7 @@ Use `.content-end` to pack lines in a flex container against the end of the main @endcomponent -## Space between +### Space between Use `.content-between` to distribute lines in a flex container such that there is an equal amount of space between each line: @@ -110,7 +111,7 @@ Use `.content-between` to distribute lines in a flex container such that there i @endcomponent -## Space around +### Space around Use `.content-around` to distribute lines in a flex container such that there is an equal amount of space around each line: @@ -133,3 +134,113 @@ Use `.content-around` to distribute lines in a flex container such that there is @endcomponent + + +## Responsive + +To apply an align content utility only at a specific breakpoint, add a `{breakpoint}:` prefix to the existing class name. For example, adding the class `md:content-around` to an element would apply the `content-around` utility at medium screen sizes and above. + +For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. + +@component('_partials.responsive-code-sample') +@slot('none') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+@endslot +@slot('sm') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+@endslot +@slot('md') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+@endslot +@slot('lg') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+@endslot +@slot('xl') +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+@endslot +@slot('code') +
+ +
+@endslot +@endcomponent diff --git a/docs/source/styles/flexbox/direction.blade.md b/docs/source/styles/flexbox/direction.blade.md index ffbf32e6b..db14c8360 100644 --- a/docs/source/styles/flexbox/direction.blade.md +++ b/docs/source/styles/flexbox/direction.blade.md @@ -6,6 +6,10 @@ category: "Flexbox" # Flex Direction +
+ Utilities for controlling the direction of flex items. +
+
Usage Responsive @@ -59,10 +63,8 @@ Use `.flex-col-reverse` to position flex items vertically in the opposite direct
@endcomponent - ## Responsive - To apply a flex direction utility only at a specific breakpoint, add a `{breakpoint}:` prefix to the existing class name. For example, adding the class `md:flex-row` to an element would apply the `flex-row` utility at medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation. diff --git a/docs/tailwind.js b/docs/tailwind.js index 4b5e6e304..8ca19fd43 100644 --- a/docs/tailwind.js +++ b/docs/tailwind.js @@ -24,15 +24,15 @@ config.fonts = { } config.textSizes = { - 'base': '1rem', // 16px - 'xs': '.75rem', // 12px - 'sm': '.875rem', // 14px - 'md': '1rem', // 16px - 'lg': '1.125rem', // 18px - 'xl': '1.25rem', // 20px - '2xl': '1.75rem', // 28px - '3xl': '2.375rem', // 38px - '4xl': '2.875rem', // 46px + 'xs': '.75rem', // 12px + 'sm': '.875rem', // 14px + 'base': '1rem', // 16px + 'lg': '1.125rem', // 18px + 'xl': '1.25rem', // 20px + '2xl': '1.5rem', // 24px + '3xl': '1.875rem', // 30px + '4xl': '2.25rem', // 36px + '5xl': '3rem', // 48px } config.fontWeights = {