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

Merge pull request #297 from tailwindcss/new-greys

Browse source 
[0.4] New grey scale, remove legacy greys
This commit is contained in:
Adam Wathan 2017-12-14 07:52:29 -05:00 • committed by GitHub
commit adc3fb03b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 862 additions and 874 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,21 +17,21 @@ For example, `.border` would add a `1px` border to all sides of the element, whe
<div class="flex items-start mt-8 text-sm leading-none">
<div class="pr-12">
<div class="mb-3 text-slate uppercase">Class</div>
<div class="mb-3 text-grey-darker uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">border</code></div>
</div>
<div class="pl-12 pr-12 border-l">
<div class="mb-3 text-slate"><span class="uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
<div class="mb-3 text-grey-darker"><span class="uppercase">Side</span> <span class="text-grey-dark text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter">&nbsp;</code> All <em class="text-xs text-grey-dark">(default)</em></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
</div>
<div class="pl-12 border-l">
<div class="mb-3 text-slate"><span class="uppercase">Width</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div class="mb-3 text-grey-darker"><span class="uppercase">Width</span> <span class="text-grey-dark text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> 1px <em class="text-xs text-slate-light">(default)</em></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter">&nbsp;</code> 1px <em class="text-xs text-grey-dark">(default)</em></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 2px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 4px</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 8px</div>

30
docs/source/docs/colors.blade.md
View file

@ -13,8 +13,8 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Grey</div>
<div class="text-black bg-grey px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="uppercase mb-6">Grey</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey']) }}</span>
@ -24,19 +24,19 @@ To get you started, we've provided a generous palette of great looking colors th
<span>White</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['white']) }}</span>
</div>
<div class="text-grey-darkest bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
<div class="text-black bg-grey-lightest px-6 py-3 text-sm font-semibold flex justify-between">
<span>Lightest</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-lightest']) }}</span>
</div>
<div class="text-grey-darkest bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
<div class="text-black bg-grey-lighter px-6 py-3 text-sm font-semibold flex justify-between">
<span>Lighter</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-lighter']) }}</span>
</div>
<div class="text-grey-darkest bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
<div class="text-black bg-grey-light px-6 py-3 text-sm font-semibold flex justify-between">
<span>Light</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey-light']) }}</span>
</div>
<div class="text-white bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
<div class="text-black bg-grey px-6 py-3 text-sm font-semibold flex justify-between flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['grey']) }}</span>
</div>
@ -64,7 +64,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-red px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Red</div>
<div class="uppercase mb-6">Red</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['red']) }}</span>
@ -103,7 +103,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-orange px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Orange</div>
<div class="uppercase mb-6">Orange</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['orange']) }}</span>
@ -142,7 +142,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-yellow-darkest bg-yellow px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Yellow</div>
<div class="uppercase mb-6">Yellow</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['yellow']) }}</span>
@ -181,7 +181,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-green px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Green</div>
<div class="uppercase mb-6">Green</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['green']) }}</span>
@ -220,7 +220,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-teal px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Teal</div>
<div class="uppercase mb-6">Teal</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['teal']) }}</span>
@ -259,7 +259,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-blue px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Blue</div>
<div class="uppercase mb-6">Blue</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['blue']) }}</span>
@ -298,7 +298,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-indigo px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Indigo</div>
<div class="uppercase mb-6">Indigo</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['indigo']) }}</span>
@ -337,7 +337,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-purple px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Purple</div>
<div class="uppercase mb-6">Purple</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['purple']) }}</span>
@ -376,7 +376,7 @@ To get you started, we've provided a generous palette of great looking colors th
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="rounded overflow-hidden">
<div class="text-white bg-pink px-6 py-4 text-sm font-semibold relative shadow z-10">
<div class="tracking-wide uppercase mb-6">Pink</div>
<div class="uppercase mb-6">Pink</div>
<div class="flex justify-between">
<span>Base</span>
<span class="font-normal opacity-75">{{ strtoupper($page->config['colors']['pink']) }}</span>

4
docs/source/docs/configuration.blade.md
View file

@ -16,8 +16,8 @@ It's important to understand that unlike other CSS frameworks you might have use
Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package:
<div class="bg-smoke-lighter font-mono text-sm p-4">
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
<div class="bg-grey-lightest font-mono text-sm p-4">
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-grey-dark">[filename]</span></div>
</div>
By default, `tailwind init` will generate a `tailwind.js` config file at the root of your project, but feel free to name this file differently or store it in a different location if you prefer.

22
docs/source/docs/container.blade.md
View file

@ -22,25 +22,25 @@ description: "A component for fixing an element's width to the current breakpoin
</thead>
<tbody class="align-baseline">
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark" rowspan="5">.container</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-grey-dark"><span class="italic">None</span></td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">width: 100%;</td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-purple-dark" rowspan="5">.container</td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-grey-dark"><span class="italic">None</span></td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">width: 100%;</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">sm <span class="text-grey-dark italic">(576px)</span></td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 576px;</td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">sm <span class="text-grey-dark italic">(576px)</span></td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 576px;</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">md <span class="text-grey-dark italic">(768px)</span></td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 768px;</td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">md <span class="text-grey-dark italic">(768px)</span></td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 768px;</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">lg <span class="text-grey-dark italic">(992px)</span></td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 992px;</td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">lg <span class="text-grey-dark italic">(992px)</span></td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 992px;</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">xl <span class="text-grey-dark italic">(1200px)</span></td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 1200px;</td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-grey-darker">xl <span class="text-grey-dark italic">(1200px)</span></td>
<td class="p-2 border-t border-grey-light font-mono text-xs text-blue-dark">max-width: 1200px;</td>
</tr>
</tbody>
</table>

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

@ -39,26 +39,26 @@ features:
]
])
### Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
### Start <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
Use `.content-start` to pack lines in a flex container against the start of the cross axis:
@component('_partials.code-sample')
<div class="flex content-start flex-wrap bg-smoke-light h-48">
<div class="flex content-start flex-wrap bg-grey-lighter h-48">
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">4</div>
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">5</div>
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
</div>
</div>
@endcomponent
@ -68,21 +68,21 @@ Use `.content-start` to pack lines in a flex container against the start of the
Use `.content-center` to pack lines in a flex container in the center of the cross axis:
@component('_partials.code-sample')
<div class="flex content-center flex-wrap bg-smoke-light h-48">
<div class="flex content-center flex-wrap bg-grey-lighter h-48">
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">4</div>
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">5</div>
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
</div>
</div>
@endcomponent
@ -92,21 +92,21 @@ Use `.content-center` to pack lines in a flex container in the center of the cro
Use `.content-end` to pack lines in a flex container against the end of the cross axis:
@component('_partials.code-sample')
<div class="flex content-end flex-wrap bg-smoke-light h-48">
<div class="flex content-end flex-wrap bg-grey-lighter h-48">
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">4</div>
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">5</div>
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
</div>
</div>
@endcomponent
@ -116,21 +116,21 @@ Use `.content-end` to pack lines in a flex container against the end of the cros
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')
<div class="flex content-between flex-wrap bg-smoke-light h-48">
<div class="flex content-between flex-wrap bg-grey-lighter h-48">
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">4</div>
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">5</div>
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
</div>
</div>
@endcomponent
@ -140,21 +140,21 @@ Use `.content-between` to distribute lines in a flex container such that there i
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')
<div class="flex content-around flex-wrap bg-smoke-light h-48">
<div class="flex content-around flex-wrap bg-grey-lighter h-48">
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">4</div>
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">5</div>
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
</div>
</div>
@endcomponent
@ -167,97 +167,97 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex content-start flex-wrap bg-smoke-light h-48">
<div class="flex content-start flex-wrap bg-grey-lighter h-48">
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">4</div>
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">5</div>
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
</div>
</div>
@endslot
@slot('sm')
<div class="flex content-end flex-wrap bg-smoke-light h-48">
<div class="flex content-end flex-wrap bg-grey-lighter h-48">
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">4</div>
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">5</div>
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
</div>
</div>
@endslot
@slot('md')
<div class="flex content-center flex-wrap bg-smoke-light h-48">
<div class="flex content-center flex-wrap bg-grey-lighter h-48">
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">4</div>
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">5</div>
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
</div>
</div>
@endslot
@slot('lg')
<div class="flex content-between flex-wrap bg-smoke-light h-48">
<div class="flex content-between flex-wrap bg-grey-lighter h-48">
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">4</div>
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">5</div>
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
</div>
</div>
@endslot
@slot('xl')
<div class="flex content-around flex-wrap bg-smoke-light h-48">
<div class="flex content-around flex-wrap bg-grey-lighter h-48">
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">4</div>
<div class="text-grey-darker text-center bg-grey-light p-2">4</div>
</div>
<div class="w-1/3 p-2">
<div class="text-slate text-center bg-smoke p-2">5</div>
<div class="text-grey-darker text-center bg-grey-light p-2">5</div>
</div>
</div>
@endslot

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

@ -39,15 +39,15 @@ features:
]
])
### Stretch <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
### Stretch <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
Use `.items-stretch` to stretch items to fill the flex container's cross axis:
@component('_partials.code-sample')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -56,10 +56,10 @@ Use `.items-stretch` to stretch items to fill the flex container's cross axis:
Use `.items-start` to align items to the start of the flex container's cross axis:
@component('_partials.code-sample')
<div class="flex items-start bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-start bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -68,10 +68,10 @@ Use `.items-start` to align items to the start of the flex container's cross axi
Use `.items-center` to align items along the center of the flex container's cross axis:
@component('_partials.code-sample')
<div class="flex items-center bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-center bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -80,10 +80,10 @@ Use `.items-center` to align items along the center of the flex container's cros
Use `.items-end` to align items to the end of the flex container's cross axis:
@component('_partials.code-sample')
<div class="flex items-end bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-end bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -92,10 +92,10 @@ Use `.items-end` to align items to the end of the flex container's cross axis:
Use `.items-baseline` to align items along the flex container's cross axis such that all of their baselines align:
@component('_partials.code-sample')
<div class="flex items-baseline bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
<div class="flex items-baseline bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
</div>
@endcomponent
@ -107,38 +107,38 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
</div>
@endslot
@slot('sm')
<div class="flex items-start bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
<div class="flex items-start bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
</div>
@endslot
@slot('md')
<div class="flex items-center bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
<div class="flex items-center bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
</div>
@endslot
@slot('lg')
<div class="flex items-end bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
<div class="flex items-end bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
</div>
@endslot
@slot('xl')
<div class="flex items-baseline bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2 text-lg">3</div>
<div class="flex items-baseline bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-base">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-2xl">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2 text-lg">3</div>
</div>
@endslot
@slot('code')

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

@ -39,15 +39,15 @@ features:
]
])
### Auto <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
### Auto <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
Use `.self-auto` to align an item based on the value of the flex container's `align-items` property:
@component('_partials.code-sample')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="self-auto flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-auto flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -56,10 +56,10 @@ Use `.self-auto` to align an item based on the value of the flex container's `al
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')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="self-start flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-start flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -68,10 +68,10 @@ Use `.self-start` to align an item to the start of the flex container's cross ax
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')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="self-center flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-center flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -80,10 +80,10 @@ Use `.self-center` to align an item along the center of the flex container's cro
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')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="self-end flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-end flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -92,10 +92,10 @@ Use `.self-end` to align an item to the end of the flex container's cross axis,
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')
<div class="flex items-start bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="self-stretch flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-start bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-stretch flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -107,38 +107,38 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="self-auto flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-auto flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('sm')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="self-start flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-start flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('md')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="self-end flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-end flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('lg')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="self-center flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-center flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('xl')
<div class="flex items-stretch bg-smoke-light h-24">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="self-stretch flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex items-stretch bg-grey-lighter h-24">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="self-stretch flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('code')

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

@ -34,15 +34,15 @@ features:
]
])
### Row <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
### Row <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
Use `.flex-row` to position flex items horizontally in the same direction as text:
@component('_partials.code-sample')
<div class="flex flex-row bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex flex-row bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -51,10 +51,10 @@ Use `.flex-row` to position flex items horizontally in the same direction as tex
Use `.flex-row-reverse` to position flex items horizontally in the opposite direction:
@component('_partials.code-sample')
<div class="flex flex-row-reverse bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex flex-row-reverse bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -63,10 +63,10 @@ Use `.flex-row-reverse` to position flex items horizontally in the opposite dire
Use `.flex-col` to position flex items vertically:
@component('_partials.code-sample')
<div class="flex flex-col bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex flex-col bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -75,10 +75,10 @@ Use `.flex-col` to position flex items vertically:
Use `.flex-col-reverse` to position flex items vertically in the opposite direction:
@component('_partials.code-sample')
<div class="flex flex-col-reverse bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex flex-col-reverse bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -90,38 +90,38 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex flex-row bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex flex-row bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('sm')
<div class="flex flex-col bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex flex-col bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('md')
<div class="flex flex-row-reverse bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex flex-row-reverse bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('lg')
<div class="flex flex-col-reverse bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex flex-col-reverse bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('xl')
<div class="flex flex-row bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex flex-row bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('code')

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

@ -29,10 +29,10 @@ features:
Use `.flex` to create a block-level flex container:
@component('_partials.code-sample')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -41,10 +41,10 @@ Use `.flex` to create a block-level flex container:
Use `.inline-flex` to create an inline flex container:
@component('_partials.code-sample')
<div class="inline-flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="inline-flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -56,38 +56,38 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('sm')
<div class="inline-flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="inline-flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('md')
<div class="block bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="block bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('lg')
<div class="hidden bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="hidden bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('xl')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('code')

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

@ -54,52 +54,52 @@ features:
]
])
### Initial <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
### Initial <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size:
@component('_partials.code-sample')
<p class="text-sm text-slate-light mb-1">Items don't grow when there's extra space</p>
<div class="flex bg-smoke-light mb-6">
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
<p class="text-sm text-grey-dark mb-1">Items don't grow when there's extra space</p>
<div class="flex bg-grey-lighter mb-6">
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Short
</div>
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Medium length
</div>
</div>
<p class="text-sm text-slate-light mb-1">Items shrink if possible when needed</p>
<div class="flex bg-smoke-light">
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
<p class="text-sm text-grey-dark mb-1">Items shrink if possible when needed</p>
<div class="flex bg-grey-lighter">
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Short
</div>
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Medium length
</div>
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
</div>
</div>
@slot('code')
<div class="flex bg-smoke-light">
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Short
</div>
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Medium length
</div>
</div>
<div class="flex bg-smoke-light">
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Short
</div>
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Medium length
</div>
<div class="flex-initial text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-initial text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
</div>
</div>
@ -111,40 +111,40 @@ Use `.flex-initial` to allow a flex item to shrink but not grow, taking into acc
Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size:
@component('_partials.code-sample')
<p class="text-sm text-slate-light mb-1">Default behavior</p>
<div class="flex bg-smoke-light mb-6">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
<p class="text-sm text-grey-dark mb-1">Default behavior</p>
<div class="flex bg-grey-lighter mb-6">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Short
</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Medium length
</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Significantly larger amount of content
</div>
</div>
<p class="text-sm text-slate-light mb-1">With <code>.flex-1</code></p>
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<p class="text-sm text-grey-dark mb-1">With <code>.flex-1</code></p>
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Short
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Medium length
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Significantly larger amount of content
</div>
</div>
@slot('code')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Short
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Medium length
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Significantly larger amount of content
</div>
</div>
@ -156,40 +156,40 @@ Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring its in
Use `.flex-auto` to allow a flex item to grow and shrink, taking into account its initial size:
@component('_partials.code-sample')
<p class="text-sm text-slate-light mb-1">Default behavior</p>
<div class="flex bg-smoke-light mb-6">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
<p class="text-sm text-grey-dark mb-1">Default behavior</p>
<div class="flex bg-grey-lighter mb-6">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Short
</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Medium length
</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Significantly larger amount of content
</div>
</div>
<p class="text-sm text-slate-light mb-1">With <code>.flex-auto</code></p>
<div class="flex bg-smoke-light">
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
<p class="text-sm text-grey-dark mb-1">With <code>.flex-auto</code></p>
<div class="flex bg-grey-lighter">
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Short
</div>
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Medium length
</div>
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Significantly larger amount of content
</div>
</div>
@slot('code')
<div class="flex bg-smoke-light">
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Short
</div>
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Medium length
</div>
<div class="flex-auto text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-auto text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Significantly larger amount of content
</div>
</div>
@ -201,14 +201,14 @@ Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it
Use `.flex-none` to prevent a flex item from growing or shrinking:
@component('_partials.code-sample')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
<div class="flex-none text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
<div class="flex-none text-grey-darkest text-center bg-grey px-4 py-2 m-2">
Item that cannot grow or shrink
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
</div>
@ -219,14 +219,14 @@ Use `.flex-none` to prevent a flex item from growing or shrinking:
Use `.flex-grow` to allow a flex item to grow to fill any available space:
@component('_partials.code-sample')
<div class="flex bg-smoke-light">
<div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Content that cannot flex
</div>
<div class="flex-grow text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
<div class="flex-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
Item that will grow
</div>
<div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Content that cannot flex
</div>
</div>
@ -237,14 +237,14 @@ Use `.flex-grow` to allow a flex item to grow to fill any available space:
Use `.flex-no-grow` to prevent a flex item from growing:
@component('_partials.code-sample')
<div class="flex bg-smoke-light">
<div class="flex-grow text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-grow text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Will grow
</div>
<div class="flex-no-grow text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
<div class="flex-no-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
Will not grow
</div>
<div class="flex-grow text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-grow text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Will grow
</div>
</div>
@ -255,14 +255,14 @@ Use `.flex-no-grow` to prevent a flex item from growing:
Use `.flex-shrink` to allow a flex item to shrink if needed:
@component('_partials.code-sample')
<div class="flex bg-smoke-light">
<div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Longer content that cannot flex
</div>
<div class="flex-shrink text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
<div class="flex-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
Item that will shrink even if it causes the content to wrap
</div>
<div class="flex-none text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-none text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Longer content that cannot flex
</div>
</div>
@ -273,14 +273,14 @@ Use `.flex-shrink` to allow a flex item to shrink if needed:
Use `.flex-no-shrink` to prevent a flex item from shrinking:
@component('_partials.code-sample')
<div class="flex bg-smoke-light">
<div class="flex-shrink text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-shrink text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can shrink if needed
</div>
<div class="flex-no-shrink text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
<div class="flex-no-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
Item that cannot shrink below its initial size
</div>
<div class="flex-shrink text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-shrink text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can shrink if needed
</div>
</div>
@ -294,66 +294,66 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
<div class="flex-none text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
<div class="flex-none text-grey-darkest text-center bg-grey px-4 py-2 m-2">
Responsive flex item
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
</div>
@endslot
@slot('sm')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
<div class="flex-grow text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
<div class="flex-grow text-grey-darkest text-center bg-grey px-4 py-2 m-2">
Responsive flex item
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
</div>
@endslot
@slot('md')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
<div class="flex-shrink text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
<div class="flex-shrink text-grey-darkest text-center bg-grey px-4 py-2 m-2">
Responsive flex item
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
</div>
@endslot
@slot('lg')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
<div class="flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
<div class="flex-1 text-grey-darkest text-center bg-grey px-4 py-2 m-2">
Responsive flex item
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
</div>
@endslot
@slot('xl')
<div class="flex bg-smoke-light">
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex bg-grey-lighter">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
<div class="flex-initial text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">
<div class="flex-initial text-grey-darkest text-center bg-grey px-4 py-2 m-2">
Responsive flex item
</div>
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 m-2">
Item that can grow or shrink if needed
</div>
</div>

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

@ -39,15 +39,15 @@ features:
]
])
### Start <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
### Start <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
Use `.justify-start` to justify items against the start of the flex container's main axis:
@component('_partials.code-sample')
<div class="flex justify-start bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-start bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -56,10 +56,10 @@ Use `.justify-start` to justify items against the start of the flex container's
Use `.justify-center` to justify items along the center of the flex container's main axis:
@component('_partials.code-sample')
<div class="flex justify-center bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-center bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -68,10 +68,10 @@ Use `.justify-center` to justify items along the center of the flex container's
Use `.justify-end` to justify items against the end of the flex container's main axis:
@component('_partials.code-sample')
<div class="flex justify-end bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-end bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -80,10 +80,10 @@ Use `.justify-end` to justify items against the end of the flex container's main
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')
<div class="flex justify-between bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-between bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -92,10 +92,10 @@ Use `.justify-between` to justify items along the flex container's main axis suc
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')
<div class="flex justify-around bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-around bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endcomponent
@ -107,38 +107,38 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex justify-start bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-start bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('sm')
<div class="flex justify-center bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-center bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('md')
<div class="flex justify-end bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-end bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('lg')
<div class="flex justify-between bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-between bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('xl')
<div class="flex justify-around bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-around bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('code')

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

@ -29,20 +29,20 @@ features:
]
])
### Don't wrap <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
### Don't wrap <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
@component('_partials.code-sample')
<div class="flex flex-no-wrap bg-smoke-light">
<div class="flex flex-no-wrap bg-grey-lighter">
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
@endcomponent
@ -52,15 +52,15 @@ Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible item
Use `.flex-wrap` to allow flex items to wrap:
@component('_partials.code-sample')
<div class="flex flex-wrap bg-smoke-light">
<div class="flex flex-wrap bg-grey-lighter">
<div class="w-2/5 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
@endcomponent
@ -70,15 +70,15 @@ Use `.flex-wrap` to allow flex items to wrap:
Use `.flex-wrap-reverse` to wrap flex items in the reverse direction:
@component('_partials.code-sample')
<div class="flex flex-wrap-reverse bg-smoke-light">
<div class="flex flex-wrap-reverse bg-grey-lighter">
<div class="w-2/5 p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
@endcomponent
@ -91,67 +91,67 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex flex-no-wrap bg-smoke-light">
<div class="flex flex-no-wrap bg-grey-lighter">
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
@endslot
@slot('sm')
<div class="flex flex-wrap bg-smoke-light">
<div class="flex flex-wrap bg-grey-lighter">
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
@endslot
@slot('md')
<div class="flex flex-wrap-reverse bg-smoke-light">
<div class="flex flex-wrap-reverse bg-grey-lighter">
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
@endslot
@slot('lg')
<div class="flex flex-no-wrap bg-smoke-light">
<div class="flex flex-no-wrap bg-grey-lighter">
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
@endslot
@slot('xl')
<div class="flex flex-wrap bg-smoke-light">
<div class="flex flex-wrap bg-grey-lighter">
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">1</div>
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">2</div>
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-slate text-center bg-smoke p-2">3</div>
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
@endslot

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

@ -32,7 +32,7 @@ Form controls are great candidates for component classes, but just for fun, here
<option>Option 2</option>
<option>Option 3</option>
</select>
<div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-slate">
<div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>

18
docs/source/docs/installation.blade.md
View file

@ -32,10 +32,10 @@ For most projects (and to take advantage of Tailwind's customization features),
Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
<div class="rounded bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
<div class="text-smoke-darker"># Using npm</div>
<div class="rounded bg-grey-lightest border-2 border-grey-light font-mono text-sm p-4">
<div class="text-grey-dark"># Using npm</div>
<div class="text-purple-dark">npm install <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--save-dev</span></div>
<div class="text-smoke-darker mt-6"># Using Yarn</div>
<div class="text-grey-dark mt-6"># Using Yarn</div>
<div class="text-purple-dark">yarn add <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--dev</span></div>
</div>
@ -45,8 +45,8 @@ Tailwind is configured almost entirely in plain JavaScript. To do this you'll ne
We've provided a CLI utility to do this easily:
<div class="rounded bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
<div class="rounded bg-grey-lightest border-2 border-grey-light font-mono text-sm p-4">
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-grey-dark">[filename]</span></div>
</div>
### 3. Use Tailwind in your CSS
@ -64,7 +64,7 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
*
* If using `postcss-import`, you should import this line from it's own file:
*
*
* @@import "./tailwind-preflight.css";
*
* See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
@ -92,7 +92,7 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
* config file.
*
* If using `postcss-import`, you should import this line from it's own file:
*
*
* @@import "./tailwind-utilities.css";
*
* See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
@ -121,8 +121,8 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:
<div class="bg-smoke-lighter font-mono text-sm p-4">
<div class="text-purple-dark">./node_modules/.bin/tailwind build <span class="text-blue-dark">styles.css</span> <span class="text-smoke-darker">[-c ./tailwind.js] [-o ./output.css]</span></div>
<div class="bg-grey-lightest font-mono text-sm p-4">
<div class="text-purple-dark">./node_modules/.bin/tailwind build <span class="text-blue-dark">styles.css</span> <span class="text-grey-dark">[-c ./tailwind.js] [-o ./output.css]</span></div>
</div>
#### Using Tailwind with PostCSS

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

@ -44,7 +44,7 @@ features:
@component('_partials.code-sample')
<div class="flex -mx-2">
@foreach ($page->config['opacity']->reverse() as $name => $value)
<div class="flex-1 text-slate text-center bg-smoke px-4 py-2 mx-2 opacity-{{ $name }}">.opacity-{{ $name }}</div>
<div class="flex-1 text-grey-darker text-center bg-grey-light px-4 py-2 mx-2 opacity-{{ $name }}">.opacity-{{ $name }}</div>
@endforeach
</div>
@slot('code')
@ -63,27 +63,27 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="text-center">
<div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 rounded-full inline-block"></div>
<div class="px-4 py-2 bg-grey-light opacity-100 w-24 h-24 rounded-full inline-block"></div>
</div>
@endslot
@slot('sm')
<div class="text-center">
<div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 rounded-full inline-block"></div>
<div class="px-4 py-2 bg-grey-light opacity-75 w-24 h-24 rounded-full inline-block"></div>
</div>
@endslot
@slot('md')
<div class="text-center">
<div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 rounded-full inline-block"></div>
<div class="px-4 py-2 bg-grey-light opacity-50 w-24 h-24 rounded-full inline-block"></div>
</div>
@endslot
@slot('lg')
<div class="text-center">
<div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 rounded-full inline-block"></div>
<div class="px-4 py-2 bg-grey-light opacity-25 w-24 h-24 rounded-full inline-block"></div>
</div>
@endslot
@slot('xl')
<div class="text-center">
<div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 rounded-full inline-block"></div>
<div class="px-4 py-2 bg-grey-light opacity-0 w-24 h-24 rounded-full inline-block"></div>
</div>
@endslot
@slot('code')

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

@ -54,13 +54,13 @@ features:
]
])
### Visible <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
### Visible <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
Use `.overflow-visible` to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.
@component('_partials.code-sample')
<div class="overflow-hidden h-24">
<div class="overflow-visible h-32 bg-smoke text-slate p-2">
<div class="overflow-visible h-32 bg-grey-light text-grey-darker p-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
</div>
</div>
@ -74,7 +74,7 @@ Use `.overflow-visible` to prevent content within an element from being clipped.
Use `.overflow-auto` to add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike `.overflow-scroll`, which always show scrollbars, this utility will only show them if scrolling is necessary.
@component('_partials.code-sample')
<div class="overflow-scroll h-32 bg-smoke text-slate p-2">
<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
</div>
@slot('code')
@ -87,7 +87,7 @@ Use `.overflow-auto` to add scrollbars to an element in the event that its conte
Use `.overflow-hidden` to clip any content within an element that overflows the bounds of that element.
@component('_partials.code-sample')
<div class="overflow-hidden h-32 bg-smoke text-slate p-2">
<div class="overflow-hidden h-32 bg-grey-light text-grey-darker p-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
</div>
@slot('code')
@ -100,7 +100,7 @@ Use `.overflow-hidden` to clip any content within an element that overflows the
Use `.overflow-x-scroll` to allow horizontal scrolling if needed.
@component('_partials.code-sample')
<div class="overflow-scroll bg-smoke text-slate p-2">
<div class="overflow-scroll bg-grey-light text-grey-darker p-2">
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
</div>
@ -114,7 +114,7 @@ Use `.overflow-x-scroll` to allow horizontal scrolling if needed.
Use `.overflow-y-scroll` to allow horizontal scrolling if needed.
@component('_partials.code-sample')
<div class="overflow-scroll h-32 bg-smoke text-slate p-2">
<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
</div>
@ -128,18 +128,18 @@ Use `.overflow-y-scroll` to allow horizontal scrolling if needed.
Use `.overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`, which only shows scrollbars if they are necessary, this utility always shows them. Note that some operating systems, like MacOS, hide unnecessary scrollbars regardless of this setting.
@component('_partials.code-sample')
<p class="text-sm text-slate-light mb-1">Scroll horizontally when content can't wrap</p>
<div class="overflow-scroll bg-smoke text-slate p-2 mb-6">
<p class="text-sm text-grey-dark mb-1">Scroll horizontally when content can't wrap</p>
<div class="overflow-scroll bg-grey-light text-grey-darker p-2 mb-6">
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
</div>
<p class="text-sm text-slate-light mb-1">Scroll vertically when content can wrap</p>
<div class="overflow-scroll h-32 bg-smoke text-slate p-2 mb-6">
<p class="text-sm text-grey-dark mb-1">Scroll vertically when content can wrap</p>
<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2 mb-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
</div>
<p class="text-sm text-slate-light mb-1">Scroll both horizontally and vertically when some content can't wrap</p>
<div class="overflow-scroll h-32 bg-smoke text-slate p-2">
<p class="text-sm text-grey-dark mb-1">Scroll both horizontally and vertically when some content can't wrap</p>
<div class="overflow-scroll h-32 bg-grey-light text-grey-darker p-2">
Loremipsumdolorsitamet,consecteturadipiscingelit.Mauriseleifendrutrumauctor.Phasellusconvallissagittisaugueutornare.Donecexlorem,auctoreurutrumin,blanditiddolor.Nullamolestiearcuturpis.Inidfelisvulputate,tempormassaeget,malesuadamauris.Quisquefringillaconsequatmetus,luctusscelerisqueleofringillavel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel. Ullam repudiandae omnis tempora soluta non, sed corporis vel reiciendis reprehenderit vitae nobis dolorum maiores eaque eos nemo mollitia animi, adipisci, molestias? Nam quo odio, similique iure, molestias ullam! Temporibus vel ab, fuga, ut nihil fugiat quaerat tenetur veniam, excepturi natus hic dolorum fugit. Ab sint molestiae nihil ex, minima facere sit adipisci. Totam quos eveniet, quibusdam qui quis aperiam aut nihil perferendis earum in error. Autem porro deleniti molestiae odio delectus alias dolorem nihil voluptates a, quam corrupti sapiente, nulla ea omnis quas ipsam rerum atque excepturi! Corporis culpa asperiores sint voluptatum, quos, cupiditate iste similique illum quas libero, temporibus laborum quisquam esse veritatis eligendi qui odit quo repellat!
</div>
@slot('code')
@ -154,7 +154,7 @@ Use `.overflow-scroll` to add scrollbars to an element. Unlike `.overflow-auto`,
Use `.scrolling-touch` to use momentum-based scrolling (where supported) on touch devices.
@component('_partials.code-sample')
<div class="scrolling-touch overflow-auto h-32 bg-smoke text-slate p-2">
<div class="scrolling-touch overflow-auto h-32 bg-grey-light text-grey-darker p-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
</div>
@slot('code')
@ -167,7 +167,7 @@ Use `.scrolling-auto` to use normal non-momentum-based scrolling on touch device
This is mostly useful for undoing `.scrolling-touch` at larger screen sizes.
@component('_partials.code-sample')
<div class="scrolling-auto overflow-auto h-32 bg-smoke text-slate p-2">
<div class="scrolling-auto overflow-auto h-32 bg-grey-light text-grey-darker p-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
</div>
@slot('code')
@ -183,32 +183,32 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="overflow-auto h-32 bg-smoke text-slate p-2">
<div class="overflow-auto h-32 bg-grey-light text-grey-darker p-2">
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.
</div>
@endslot
@slot('sm')
<div class="overflow-visible h-32 bg-smoke text-slate p-2">
<div class="overflow-visible h-32 bg-grey-light text-grey-darker p-2">
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
@endslot
@slot('md')
<div class="overflow-hidden h-32 bg-smoke text-slate p-2">
<div class="overflow-hidden h-32 bg-grey-light text-grey-darker p-2">
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
@endslot
@slot('lg')
<div class="overflow-x-scroll h-32 bg-smoke text-slate p-2">
<div class="overflow-x-scroll h-32 bg-grey-light text-grey-darker p-2">
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>
@endslot
@slot('xl')
<div class="overflow-y-scroll h-32 bg-smoke text-slate p-2">
<div class="overflow-y-scroll h-32 bg-grey-light text-grey-darker p-2">
QrLmmW69vMQDtCOg48jidqvvWD2FzDt7I7bBoDc98SRP5OwvOScVYbRzFdfp540eF5v1pjogYkyI8NXqu4wY8chgsXIV0LU7XQKWJ98wLaBSHWiBhvkEU1T3sd6KEFo53CLjVjIz8UvZajb8sbsu62xTsF9cRtFdwEvusq6zJHvedymDCUkY6qXHsuL6fOmHo4KKMurZuJZrK3plRPUaI8XVciz8dVq5CEUXjMrTcB76H1w90CnkRER3nYjs3suTa3223xs8aL97m0peQfjlvKbF8HcmQG5mHEitCn1QZnbMZUK3zE9AIjwcVXP7R9V4fw2A93cZD7wj333X6aaiHZdkkTPtst0u05KSob5c0ZuKQi4D3V395NfFKKr8cR27jmpB7dqK2GiWXeOQUFcjmFVwlHWSlH8ZdUoVJpXf1xL6CRUxwZP4EhBbqQZaJm26ijWII6LRxJ5eVU9Y7KKvQsUeX5BawtgeMWRmjeCwQadTLTQG8gLpi2DvGpMtPWCdqHgEglVSB1ZlDrjEEsXYrNx1IOY0053K3pWNaR1ezyz8kahRfNs3byaHcIQu9tWTrcMpBWhZ45DzLjVV1N8Zt96uLnNWK5DvbKW8GgMuwY7fHkZFz85MN4d2gL0j85HmXGx9oPTFRkPWsmMOHUvm5IhB7QqGSAwT1uL7HgBrNX9a1BAWrp9zV1IWAd1q65sKOOCxTZrXJDpxBxYE4rJAGU6pcri9mUf4g49ZiIAwfu9njtZyYimmImCa6TFhk2jQcSmFDHacExxqC2BfYATHFrKSy94dbw6uWT52nM7MSM9JDu4cs9cbfnaf6amt4hTUotCTONg604b8JKPI1sfd4CG36fBNcnErhpllfRlXkY1xFwmwZT7IJV8okPGNQdTKpdPJOBGw3LHMKojPJl1nPiQB5C9bdePFMNLejSXY5DDvO70ehOCJpBtKZY2quoFJJjGfXe8T4DuGYGmM6JYd5DNinWZuUWXGvfIlJRHgf8BQNQvtmEzqGXIeQZitiq9F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend rutrum auctor. Phasellus convallis sagittis augue ut ornare. Vestibulum et gravida lectus, sed ultrices sapien. Nullam aliquet elit dui, vitae hendrerit lectus volutpat eget. In porttitor tincidunt egestas. Pellentesque laoreet ligula at est vulputate facilisis. Etiam tristique justo ut odio placerat ornare. Cras bibendum, orci at ornare tincidunt, lacus nunc gravida enim, sit amet euismod nunc lectus in lectus. Ut dictum nulla et arcu aliquet ornare. Aliquam et dapibus lectus. Aenean mattis elit mi, sed ultricies augue consectetur id. Sed id magna malesuada, luctus urna a, bibendum tortor. Cras cursus cursus ex. Nulla fringilla elit vitae imperdiet scelerisque. Donec ac sem eu diam convallis mollis a sed leo. Proin congue augue turpis, eget rutrum dolor ultricies non. Nulla blandit venenatis dapibus. Sed tincidunt mollis elit, quis suscipit nibh eleifend quis. Donec ex lorem, auctor eu rutrum in, blandit id dolor. Nulla molestie arcu turpis. In id felis vulputate, tempor massa eget, malesuada mauris. Quisque fringilla consequat metus, luctus scelerisque leo fringilla vel.</div>

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

@ -69,26 +69,26 @@ features:
]
])
### Static <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
### Static <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
Use `.static` to position an element according to the normal flow of the document.
Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.
@component('_partials.code-sample')
<div class="relative bg-smoke p-4">
<div class="static h-32 bg-smoke-darker p-4 text-slate-darker">
<div class="relative bg-grey-light p-4">
<div class="static h-32 bg-grey-dark p-4 text-black">
<p>Static parent</p>
<div class="absolute pin-b pin-l bg-slate-dark p-4 text-smoke">
<div class="absolute pin-b pin-l bg-grey-darkest p-4 text-grey-light">
<p>Absolute child</p>
</div>
</div>
</div>
@slot('code')
<div class="static bg-smoke-darker">
<div class="static bg-grey-dark">
Static parent
<div class="absolute pin-b pin-l bg-slate-dark">
<div class="absolute pin-b pin-l bg-grey-darkest">
Absolute child
</div>
</div>
@ -102,19 +102,19 @@ Use `.relative` to position an element according to the normal flow of the docum
Offsets are calculated relative to the element's normal position and the element *will* act as a position reference for absolutely positioned children.
@component('_partials.code-sample')
<div class="relative bg-smoke p-4">
<div class="relative h-32 bg-smoke-darker p-4 text-slate-darker">
<div class="relative bg-grey-light p-4">
<div class="relative h-32 bg-grey-dark p-4 text-black">
<p>Relative parent</p>
<div class="absolute pin-b pin-l bg-slate-dark p-4 text-smoke">
<div class="absolute pin-b pin-l bg-grey-darkest p-4 text-grey-light">
<p>Absolute child</p>
</div>
</div>
</div>
@slot('code')
<div class="relative bg-smoke-darker">
<div class="relative bg-grey-dark">
Relative parent
<div class="absolute pin-b pin-l bg-slate-dark">
<div class="absolute pin-b pin-l bg-grey-darkest">
Absolute child
</div>
</div>
@ -129,43 +129,43 @@ Offsets are calculated relative to the nearest parent that has a position other
@component('_partials.code-sample')
<p class="text-sm text-slate-light mb-1">With static positioning</p>
<div class="relative bg-smoke px-4 pt-2 pb-4 mb-6">
<p class="mb-2 text-slate">Relative parent</p>
<div class="static bg-smoke-dark p-4 text-slate">
<p class="text-sm text-grey-dark mb-1">With static positioning</p>
<div class="relative bg-grey-light px-4 pt-2 pb-4 mb-6">
<p class="mb-2 text-grey-darker">Relative parent</p>
<div class="static bg-grey p-4 text-grey-darker">
<p class="mb-2">Static parent</p>
<div class="static pin-b pin-l bg-slate-dark p-4 text-smoke inline-block">
<div class="static pin-b pin-l bg-grey-darkest p-4 text-grey-light inline-block">
<p>Static child</p>
</div>
<div class="bg-smoke p-4 text-slate inline-block">
<div class="bg-grey-light p-4 text-grey-darker inline-block">
<p>Static sibling</p>
</div>
</div>
</div>
<p class="text-sm text-slate-light mb-1">With absolute positioning</p>
<div class="relative bg-smoke px-4 pt-2 pb-4">
<p class="mb-2 text-slate">Relative parent</p>
<div class="static bg-smoke-dark p-4 text-slate">
<p class="text-sm text-grey-dark mb-1">With absolute positioning</p>
<div class="relative bg-grey-light px-4 pt-2 pb-4">
<p class="mb-2 text-grey-darker">Relative parent</p>
<div class="static bg-grey p-4 text-grey-darker">
<p class="mb-2">Static parent</p>
<div class="absolute pin-t pin-r bg-slate-dark p-4 text-smoke inline-block">
<div class="absolute pin-t pin-r bg-grey-darkest p-4 text-grey-light inline-block">
<p>Absolute child</p>
</div>
<div class="bg-smoke p-4 text-slate inline-block">
<div class="bg-grey-light p-4 text-grey-darker inline-block">
<p>Static sibling</p>
</div>
</div>
</div>
@slot('code')
<div class="relative bg-smoke">
<div class="relative bg-grey-light">
Relative parent
<div class="static bg-smoke-darker">
<div class="static bg-grey-dark">
Static parent
<div class="absolute pin-t pin-r bg-slate-dark">
<div class="absolute pin-t pin-r bg-grey-darkest">
Absolute child
</div>
<div class="bg-smoke inline-block">
<div class="bg-grey-light inline-block">
Static sibling
</div>
</div>
@ -181,21 +181,21 @@ Offsets are calculated relative to the viewport and the element *will* act as a
@component('_partials.code-sample')
<div class="rounded-b overflow-hidden max-w-md mx-auto mt-4 mb-4">
<div class="rounded-t border-t border-l border-r border-smoke bg-smoke-light flex px-4 py-3">
<div class="rounded-t border-t border-l border-r border-grey-light bg-grey-lighter flex px-4 py-3">
<div class="mr-6">
<span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
<span class="inline-block rounded-full bg-smoke-dark h-3 w-3 mr-1"></span>
<span class="inline-block rounded-full bg-smoke-dark h-3 w-3"></span>
<span class="inline-block rounded-full bg-grey h-3 w-3 mr-1"></span>
<span class="inline-block rounded-full bg-grey h-3 w-3 mr-1"></span>
<span class="inline-block rounded-full bg-grey h-3 w-3"></span>
</div>
<div class="flex-1 bg-white border border-smoke rounded mr-4"></div>
<div class="flex-1 bg-white border border-grey-light rounded mr-4"></div>
</div>
<div class="relative bg-smoke h-64">
<div class="relative bg-grey-light h-64">
<!-- Hey fellow nerd! Yes, we're using position absolute instead of position fixed in the demo; it's the best way we could come up with to demonstrate how position fixed works without totally jacking up the layout of the entire documentation site. Forgive us! 😄 -->
<div class="absolute pin-l pin-r pin-t bg-slate-dark text-smoke z-10 px-4 py-3">
<div class="absolute pin-l pin-r pin-t bg-grey-darkest text-grey-light z-10 px-4 py-3">
Fixed child
<div class="absolute pin-t pin-b pin-r px-4 py-3 bg-smoke-dark text-slate-dark">
<div class="absolute pin-t pin-b pin-r px-4 py-3 bg-grey text-grey-darkest">
Absolute child
</div>
</div>
@ -214,10 +214,10 @@ Offsets are calculated relative to the viewport and the element *will* act as a
</div>
@slot('code')
<div class="bg-smoke pt-16">
<div class="fixed bg-smoke-darker">
<div class="bg-grey-light pt-16">
<div class="fixed bg-grey-dark">
Fixed child
<div class="absolute pin-t pin-r bg-slate-dark">
<div class="absolute pin-t pin-r bg-grey-darkest">
Absolute child
</div>
</div>
@ -237,12 +237,12 @@ Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably fin
<div class="flex items-start mt-8 text-sm leading-none mb-8">
<div class="pr-12">
<div class="mb-3 text-slate uppercase">Class</div>
<div class="mb-3 text-grey-darker uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pin</code></div>
</div>
<div class="pl-12 pr-12 border-l">
<div class="mb-3 text-slate"><span class="uppercase">Edge</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
<div class="mb-3 text-grey-darker"><span class="uppercase">Edge</span> <span class="text-grey-dark text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter">&nbsp;</code> All <em class="text-xs text-grey-dark">(default)</em></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
@ -255,59 +255,59 @@ Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably fin
@component('_partials.code-sample')
<div class="flex justify-around mb-8">
<div>
<p class="text-center text-sm text-slate-light mb-1">.pin-x.pin-t</p>
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-x pin-t h-8 bg-slate"></div>
<p class="text-center text-sm text-grey-dark mb-1">.pin-x.pin-t</p>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-x pin-t h-8 bg-grey-darker"></div>
</div>
</div>
<div>
<p class="text-center text-sm text-slate-light mb-1">.pin-y.pin-r</p>
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-y pin-r w-8 bg-slate"></div>
<p class="text-center text-sm text-grey-dark mb-1">.pin-y.pin-r</p>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-y pin-r w-8 bg-grey-darker"></div>
</div>
</div>
<div>
<p class="text-center text-sm text-slate-light mb-1">.pin-x.pin-b</p>
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-x pin-b h-8 bg-slate"></div>
<p class="text-center text-sm text-grey-dark mb-1">.pin-x.pin-b</p>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-x pin-b h-8 bg-grey-darker"></div>
</div>
</div>
<div>
<p class="text-center text-sm text-slate-light mb-1">.pin-y.pin-l</p>
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-y pin-l w-8 bg-slate"></div>
<p class="text-center text-sm text-grey-dark mb-1">.pin-y.pin-l</p>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-y pin-l w-8 bg-grey-darker"></div>
</div>
</div>
<div>
<p class="text-center text-sm text-slate-light mb-1">.pin</p>
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin bg-slate"></div>
<p class="text-center text-sm text-grey-dark mb-1">.pin</p>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin bg-grey-darker"></div>
</div>
</div>
</div>
<div class="flex justify-around">
<div>
<p class="text-center text-sm text-slate-light mb-1">.pin-l.pin-t</p>
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-l pin-t h-8 w-8 bg-slate"></div>
<p class="text-center text-sm text-grey-dark mb-1">.pin-l.pin-t</p>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-l pin-t h-8 w-8 bg-grey-darker"></div>
</div>
</div>
<div>
<p class="text-center text-sm text-slate-light mb-1">.pin-t.pin-r</p>
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-t pin-r h-8 w-8 bg-slate"></div>
<p class="text-center text-sm text-grey-dark mb-1">.pin-t.pin-r</p>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-t pin-r h-8 w-8 bg-grey-darker"></div>
</div>
</div>
<div>
<p class="text-center text-sm text-slate-light mb-1">.pin-r.pin-b</p>
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-r pin-b h-8 w-8 bg-slate"></div>
<p class="text-center text-sm text-grey-dark mb-1">.pin-r.pin-b</p>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-r pin-b h-8 w-8 bg-grey-darker"></div>
</div>
</div>
<div>
<p class="text-center text-sm text-slate-light mb-1">.pin-b.pin-l</p>
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-b pin-l h-8 w-8 bg-slate"></div>
<p class="text-center text-sm text-grey-dark mb-1">.pin-b.pin-l</p>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-b pin-l h-8 w-8 bg-grey-darker"></div>
</div>
</div>
<div class="relative h-24 w-24 opacity-0"></div>
@ -315,48 +315,48 @@ Combined with Tailwind's [spacing utilities](/docs/spacing), you'll probably fin
@slot('code')
<!-- Span top edge -->
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-x pin-t h-8 bg-slate"></div>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-x pin-t h-8 bg-grey-darker"></div>
</div>
<!-- Span right edge -->
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-y pin-r w-8 bg-slate"></div>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-y pin-r w-8 bg-grey-darker"></div>
</div>
<!-- Span bottom edge -->
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-x pin-b h-8 bg-slate"></div>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-x pin-b h-8 bg-grey-darker"></div>
</div>
<!-- Span left edge -->
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-y pin-l bg-slate"></div>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-y pin-l bg-grey-darker"></div>
</div>
<!-- Fill entire parent -->
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin bg-slate"></div>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin bg-grey-darker"></div>
</div>
<!-- Pin to top left corner -->
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-l pin-t h-8 w-8 bg-slate"></div>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-l pin-t h-8 w-8 bg-grey-darker"></div>
</div>
<!-- Pin to top right corner -->
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-t pin-r h-8 w-8 bg-slate"></div>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-t pin-r h-8 w-8 bg-grey-darker"></div>
</div>
<!-- Pin to bottom right corner -->
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-b pin-r h-8 w-8 bg-slate"></div>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-b pin-r h-8 w-8 bg-grey-darker"></div>
</div>
<!-- Pin to bottom left corner -->
<div class="relative h-24 w-24 bg-smoke">
<div class="absolute pin-b pin-l h-8 w-8 bg-slate"></div>
<div class="relative h-24 w-24 bg-grey-light">
<div class="absolute pin-b pin-l h-8 w-8 bg-grey-darker"></div>
</div>
@endslot
@endcomponent
@ -369,37 +369,37 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="relative h-32 bg-smoke p-4">
<div class="relative bg-slate-dark p-4 text-smoke-dark">Responsive element</div>
<div class="relative h-32 bg-grey-light p-4">
<div class="relative bg-grey-darkest p-4 text-grey">Responsive element</div>
</div>
@endslot
@slot('sm')
<div class="relative h-32 bg-smoke p-4">
<div class="absolute pin-b pin-l bg-slate-dark p-4 text-smoke-dark">Responsive element</div>
<div class="relative h-32 bg-grey-light p-4">
<div class="absolute pin-b pin-l bg-grey-darkest p-4 text-grey">Responsive element</div>
</div>
@endslot
@slot('md')
<div class="relative h-32 bg-smoke p-4">
<div class="absolute pin-t pin-x bg-slate-dark p-4 text-smoke-dark">Responsive element</div>
<div class="relative h-32 bg-grey-light p-4">
<div class="absolute pin-t pin-x bg-grey-darkest p-4 text-grey">Responsive element</div>
</div>
@endslot
@slot('lg')
<div class="relative h-32 bg-smoke p-4">
<div class="absolute pin-r pin-y bg-slate-dark p-4 text-smoke-dark">Responsive element</div>
<div class="relative h-32 bg-grey-light p-4">
<div class="absolute pin-r pin-y bg-grey-darkest p-4 text-grey">Responsive element</div>
</div>
@endslot
@slot('xl')
<div class="relative h-32 bg-smoke p-4">
<div class="absolute pin-b pin-x bg-slate-dark p-4 text-smoke-dark">Responsive element</div>
<div class="relative h-32 bg-grey-light p-4">
<div class="absolute pin-b pin-x bg-grey-darkest p-4 text-grey">Responsive element</div>
</div>
@endslot
@slot('code')
<div class="relative h-32 bg-smoke p-4">
<div class="relative h-32 bg-grey-light p-4">
<div class="none:relative sm:absolute sm:pin-b sm:pin-l md:pin-t md:pin-x lg:pin-r lg:pin-y xl:pin-b xl:pin-x"></div>
</div>
@endslot

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

@ -61,7 +61,7 @@ Use the `.shadow-inner` utility to apply a subtle inset box shadow to an element
This can be useful for things like form controls or wells.
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
<div class="p-4 bg-smoke-lighter shadow-inner">.shadow-inner</div>
<div class="p-4 bg-grey-lightest shadow-inner">.shadow-inner</div>
@slot('code')
<div class="shadow-inner"></div>
@endslot
@ -89,27 +89,27 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex justify-center">
<div class="shadow px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
<div class="shadow px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('sm')
<div class="flex justify-center">
<div class="shadow-md px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
<div class="shadow-md px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('md')
<div class="flex justify-center">
<div class="shadow-lg px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
<div class="shadow-lg px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('lg')
<div class="flex justify-center">
<div class="shadow-inner px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
<div class="shadow-inner px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('xl')
<div class="flex justify-center">
<div class="shadow-none px-4 py-2 bg-smoke-lighter opacity-100 w-24 h-24 rounded-full"></div>
<div class="shadow-none px-4 py-2 bg-grey-lightest opacity-100 w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('code')

12
docs/source/docs/spacing.blade.md
View file

@ -17,14 +17,14 @@ For example, `.pt-2` would add `.5rem` of padding to the top of the element, `.m
<div class="flex items-start mt-8 text-sm">
<div class="pr-12">
<div class="mb-3 text-slate uppercase">Class</div>
<div class="mb-3 text-grey-darker uppercase">Class</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">-m</code> Negative Margin</div>
</div>
<div class="pl-12 pr-12 border-l">
<div class="mb-3 text-slate"><span class="uppercase">Side</span> <span class="text-slate-light text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-smoke-light">&nbsp;</code> All <em class="text-xs text-slate-light">(default)</em></div>
<div class="mb-3 text-grey-darker"><span class="uppercase">Side</span> <span class="text-grey-dark text-xs">(optional)</span></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded bg-grey-lighter">&nbsp;</code> All <em class="text-xs text-grey-dark">(default)</em></div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
@ -33,7 +33,7 @@ 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-2 py-1 font-mono border rounded">y</code> Vertical</div>
</div>
<div class="pl-12 border-l">
<div class="mb-3 text-slate uppercase">Space</div>
<div class="mb-3 text-grey-darker uppercase">Space</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
@ -42,7 +42,7 @@ 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-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
<div><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">px</code> 1px</div>
<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><code class="inline-block my-1 mr-1 px-1 py-1 font-mono border rounded">auto</code> auto <span class="text-grey-dark text-xs">(margins only)</span></div>
</div>
</div>
@ -59,7 +59,7 @@ For example, this config will _also_ generate hover and focus variants of the ma
```js
{
// ...
modules: {
modules: {
// ...
margin: ['responsive', 'hover', 'focus'],
negativeMargin: ['responsive', 'hover'],

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

@ -24,12 +24,12 @@ features:
]
])
### Visible <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
### Visible <span class="ml-2 font-semibold text-grey-dark text-sm uppercase tracking-wide">Default</span>
Use `.visible` to make an element visible. This will typically be used as a reset when using the `.invisible` utility.
@component('_partials.code-sample', ['class' => 'flex justify-center'])
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
<div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
@endcomponent
### Invisible
@ -37,7 +37,7 @@ Use `.visible` to make an element visible. This will typically be used as a rese
Use `.invisible` to hide an element, but still maintain its space.
@component('_partials.code-sample', ['class' => 'flex justify-center'])
<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
<div class="invisible bg-grey-light w-24 h-24 rounded-full"></div>
@endcomponent
## Responsive
@ -49,27 +49,27 @@ For more information about Tailwind's responsive design features, check out the
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex justify-center">
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
<div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('sm')
<div class="flex justify-center">
<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
<div class="invisible bg-grey-light w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('md')
<div class="flex justify-center">
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
<div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('lg')
<div class="flex justify-center">
<div class="invisible bg-smoke w-24 h-24 rounded-full"></div>
<div class="invisible bg-grey-light w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('xl')
<div class="flex justify-center">
<div class="visible bg-smoke w-24 h-24 rounded-full"></div>
<div class="visible bg-grey-light w-24 h-24 rounded-full"></div>
</div>
@endslot
@slot('code')

40
docs/source/docs/what-is-tailwind.blade.md
View file

@ -105,38 +105,38 @@ Tailwind uses an intuitive `{screen}:` prefix that makes it easy to notice respo
@component('_partials.responsive-code-sample')
@slot('none')
<div class="flex justify-start bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-start bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('sm')
<div class="flex justify-center bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-center bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('md')
<div class="flex justify-end bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-end bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('lg')
<div class="flex justify-between bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-between bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('xl')
<div class="flex justify-around bg-smoke-light">
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">2</div>
<div class="text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
<div class="flex justify-around bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
@endslot
@slot('code')