mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Clean up table styles
This commit is contained in:
Jonathan Reinink
parent
de97bcc384
commit
3e81a74efd
@ -30,9 +30,9 @@ title: "Backgrounds"
|
||||
<tbody class="align-baseline">
|
||||
@foreach ($page->config['colors'] as $name => $value)
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.bg-{{ $name }}</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">color: {{ $value }};</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the background color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark">.bg-{{ $name }}</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark">color: {{ $value }};</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the background color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
|
||||
@ -20,11 +20,6 @@ title: "Background Position"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -34,49 +29,49 @@ title: "Background Position"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-bottom</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: bottom</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the bottom edge</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-bottom</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: bottom;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Place the background image on the bottom edge.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-center</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: center</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image in the center</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-center</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: center;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image in the center.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-left</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: left</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left edge</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left edge.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-left-bottom</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: left bottom</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left bottom edge</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-bottom</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left bottom;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left bottom edge.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-left-top</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: left top</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left top edge</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-left-top</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: left top;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the left top edge.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-right</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: right</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right edge</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right edge.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-right-bottom</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: right bottom</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right bottom edge</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-bottom</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right bottom;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right bottom edge.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-right-top</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: right top</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right top edge</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-right-top</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: right top;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the right top edge.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-top</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: top</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the top edge</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.bg-top</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">background-position: top;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Place the background image on the top edge.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -20,11 +20,11 @@ title: "Background Size"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -34,14 +34,14 @@ title: "Background Size"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-cover</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: cover</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Scale the image until it fills the background layer</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.bg-cover</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">background-position: cover;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Scale the image until it fills the background layer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.bg-contain</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: contain</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Scale the image to the outer edges without cropping or stretching</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">background-position: contain;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Scale the image to the outer edges without cropping or stretching.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -33,32 +33,32 @@ title: "Border Radius"
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.rounded</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-radius: .25rem;</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">border-radius: .25rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Apply a medium border radius to all corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-sm</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .125rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .125rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small border radius to all corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-lg</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .5rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: .5rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large border radius to all corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-full</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 9999px;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 9999px;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Fully round all corners of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-none</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">border-radius: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Remove any border radius from all sides of an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-t</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
border-bottom-left-radius: 0;<br>
|
||||
border-bottom-right-radius: 0;
|
||||
</td>
|
||||
@ -66,7 +66,7 @@ title: "Border Radius"
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-r</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
border-top-left-radius: 0;<br>
|
||||
border-bottom-left-radius: 0;
|
||||
</td>
|
||||
@ -74,7 +74,7 @@ title: "Border Radius"
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-b</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
border-top-right-radius: 0;<br>
|
||||
border-top-left-radius: 0;
|
||||
</td>
|
||||
@ -82,7 +82,7 @@ title: "Border Radius"
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.rounded-l</td>
|
||||
<td class="w-2/5 p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
border-top-right-radius: 0;<br>
|
||||
border-bottom-right-radius: 0;
|
||||
</td>
|
||||
|
||||
@ -29,9 +29,9 @@ title: "Display"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.block</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">display: block;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the box type of the element to <code>block</code>.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.block</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">display: block;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the box type of the element to <code>block</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.inline-block</td>
|
||||
|
||||
@ -33,9 +33,9 @@ category: "Flexbox"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-start</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-content: flex-start;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Pack lines against the start of the cross axis.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.content-start</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-content: flex-start;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Pack lines against the start of the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.content-center</td>
|
||||
|
||||
@ -19,11 +19,11 @@ category: "Flexbox"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -33,9 +33,9 @@ category: "Flexbox"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-stretch</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-items: flex-stretch;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Stretch items to fill the cross axis.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.items-stretch</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-items: flex-stretch;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Stretch items to fill the cross axis.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.items-start</td>
|
||||
|
||||
@ -19,11 +19,6 @@ category: "Flexbox"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -33,9 +28,9 @@ category: "Flexbox"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-auto</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">align-self: auto;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align item based on the container's `align-items` property.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.self-auto</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">align-self: auto;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Align item based on the container's <code>align-items</code> property.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.self-start</td>
|
||||
|
||||
@ -19,11 +19,6 @@ category: "Flexbox"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-2/5">
|
||||
<col class="w-2/5">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -33,9 +28,9 @@ category: "Flexbox"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-row</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-direction: row;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position flex items in the normal horizontal direction.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex-row</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex-direction: row;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Position flex items in the normal horizontal direction.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-row-reverse</td>
|
||||
|
||||
@ -19,11 +19,6 @@ category: "Flexbox"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/4">
|
||||
<col class="w-1/4">
|
||||
<col class="w-1/2">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -33,9 +28,9 @@ category: "Flexbox"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">display: flex;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Create a block-level flex container.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">display: flex;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Create a block-level flex container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.inline-flex</td>
|
||||
|
||||
@ -19,11 +19,11 @@ category: "Flexbox"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -33,9 +33,9 @@ category: "Flexbox"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-start</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">justify-content: flex-start;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Justify items against the start of the container.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.justify-start</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">justify-content: flex-start;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Justify items against the start of the container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.justify-center</td>
|
||||
|
||||
@ -19,11 +19,6 @@ category: "Flexbox"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-2/5">
|
||||
<col class="w-2/5">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -33,9 +28,9 @@ category: "Flexbox"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-no-wrap</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">flex-wrap: nowrap;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Don't allow flex items to wrap.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.flex-no-wrap</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">flex-wrap: nowrap;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Don't allow flex items to wrap.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.flex-wrap</td>
|
||||
|
||||
@ -29,9 +29,9 @@ title: "Floats"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.float-right</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">float: right;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Moves the element to the right side of its container.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.float-right</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">float: right;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Moves the element to the right side of its container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.float-left</td>
|
||||
|
||||
@ -34,44 +34,44 @@ title: "Font Weight"
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to hairline.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-thin</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 200;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to thin.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-thin</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 200;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to thin.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-light</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 300;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to light.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-light</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 300;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to light.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-normal</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 400;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to normal.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-normal</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 400;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to normal.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-medium</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 500;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to medium.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-medium</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 500;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to medium.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-semibold</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 600;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to semibold.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-semibold</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 600;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to semibold.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-bold</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 700;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to bold.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-bold</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 700;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to bold.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-extrabold</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 800;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to extrabold.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-extrabold</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 800;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to extrabold.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-black</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-weight: 900;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font weight of an element to black.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-black</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-weight: 900;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font weight of an element to black.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -39,14 +39,14 @@ title: "Font Families"
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font family to the sans font stack.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-serif</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font family to the serif font stack.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-serif</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font family to the serif font stack.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.font-mono</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font family to the mono font stack.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.font-mono</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font family to the mono font stack.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -20,11 +20,11 @@ title: "Height"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -34,9 +34,9 @@ title: "Height"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-1</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 0.25rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>0.25rem</code>.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.h-1</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">height: 0.25rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's height to <code>0.25rem</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-2</td>
|
||||
@ -115,7 +115,7 @@ title: "Height"
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.h-screen</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 100vh</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">height: 100vh;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's height to <code>100vh</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -34,14 +34,14 @@ title: "Letter Spacing"
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the letter spacing of an element to <code>-0.05em</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-normal</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">letter-spacing: 0;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the letter spacing of an element to <code>0</code>.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-normal</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">letter-spacing: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the letter spacing of an element to <code>0</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-wide</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">letter-spacing: 0.05em;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the letter spacing of an element to <code>0.05em</code>.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.tracking-wide</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">letter-spacing: 0.05em;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the letter spacing of an element to <code>0.05em</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -34,19 +34,19 @@ title: "Line Height"
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the line height of an element to <code>1</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-tight</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">line-height: 1.25;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the line height of an element to <code>1.25</code>.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-tight</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 1.25;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>1.25</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-normal</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">line-height: 1.5;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the line height of an element to <code>1.5</code>.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-normal</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 1.5;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>1.5</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-loose</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">line-height: 2;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the line height of an element to <code>2</code>.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.leading-loose</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">line-height: 2;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the line height of an element to <code>2</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -20,11 +20,11 @@ title: "Max-Height"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -34,9 +34,9 @@ title: "Max-Height"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-h-full</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-height: 100%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum height to <code>100%</code>.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.max-h-full</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-height: 100%;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's maximum height to <code>100%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-h-screen</td>
|
||||
|
||||
@ -20,11 +20,11 @@ title: "Max-Width"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -34,9 +34,9 @@ title: "Max-Width"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-xs</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">max-width: 20rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's maximum width to <code>20rem</code>.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.max-w-xs</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 20rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's maximum width to <code>20rem</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.max-w-sm</td>
|
||||
|
||||
@ -20,11 +20,11 @@ title: "Min-Height"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -34,9 +34,9 @@ title: "Min-Height"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-h-0</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-height: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum height to <code>0</code>.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.min-h-0</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">min-height: 0;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's minimum height to <code>0</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-h-full</td>
|
||||
|
||||
@ -20,11 +20,11 @@ title: "Min-Width"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -34,9 +34,9 @@ title: "Min-Width"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-w-0</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">min-width: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's minimum width to <code>0.25rem</code>.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.min-w-0</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">min-width: 0;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's minimum width to <code>0.25rem</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.min-w-full</td>
|
||||
|
||||
@ -18,6 +18,11 @@ title: "Overflow"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/4">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -27,38 +32,38 @@ title: "Overflow"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-visible</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: 'visible';</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent content within an element from being clipped.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.overflow-visible</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">overflow: 'visible';</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Prevent content within an element from being clipped.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-auto</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: 'auto';</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.overflow-auto</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">overflow: 'auto';</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add scrollbars to an element if needed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-hidden</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: 'hidden';</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.overflow-hidden</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">overflow: 'hidden';</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Clip any content that overflows the element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.mask</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: 'hidden';</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.mask</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">overflow: 'hidden';</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Clip any content that overflows the element. Alias of <code>.overflow-hidden</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-x-scroll</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow-x: 'auto'</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.overflow-x-scroll</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">overflow-x: 'auto'</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow horizontal scrolling if needed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-y-scroll</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow-y: 'auto'</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.overflow-y-scroll</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">overflow-y: 'auto'</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow horizontal scrolling if needed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-scroll</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow: 'scroll';</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.overflow-scroll</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">overflow: 'scroll';</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Add scrollbars to an element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -27,64 +27,64 @@ title: "Positioning"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.static</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">position: static;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element according to the normal flow of the document.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.static</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">position: static;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Position an element according to the normal flow of the document.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.fixed</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">position: fixed;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.fixed</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: fixed;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element relative to the browser window.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.absolute</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">position: absolute;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.absolute</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: absolute;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.relative</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">position: relative;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.relative</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">position: relative;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Position an element according to the normal flow of the document.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.pin-t</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">top: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-t</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">top: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the top edge of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.pin-r</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">right: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-r</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">right: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the right edge of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.pin-b</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">bottom: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-b</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">bottom: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the bottom edge of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.pin-l</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">left: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-l</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">left: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the left edge of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.pin-y</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-y</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
top: 0;<br>
|
||||
bottom: 0;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the top and bottom edges of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.pin-x</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin-x</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
right: 0;<br>
|
||||
left: 0;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Anchor absolutely positioned element to the left and right edges of the nearest positioned parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.pin</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.pin</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
top: 0;<br>
|
||||
right: 0;<br>
|
||||
bottom: 0;<br>
|
||||
|
||||
@ -18,11 +18,11 @@ title: "Shadows"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-2/5">
|
||||
<col class="w-2/5">
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/4">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
|
||||
@ -30,9 +30,9 @@ title: "Text Color"
|
||||
<tbody class="align-baseline">
|
||||
@foreach ($page->config['colors'] as $name => $value)
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-{{ $name }}</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">color: {{ $value }};</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">.text-{{ $name }}</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-no-wrap">color: {{ $value }};</td>
|
||||
<td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">Set the text color of an element to {{ implode(' ', array_reverse(explode('-', $name))) }}.</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
|
||||
@ -22,8 +22,8 @@ title: "Text Sizing"
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-2/5">
|
||||
<col class="w-2/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -39,44 +39,44 @@ title: "Text Sizing"
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>.75rem</code> (<code>12px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-sm</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: .875rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>.875rem</code> (<code>14px</code>).</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-sm</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: .875rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>.875rem</code> (<code>14px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-base</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 1rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>1rem</code> (<code>16px</code>).</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-base</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1rem</code> (<code>16px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-lg</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 1.125rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>1.125rem</code> (<code>18px</code>).</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-lg</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.125rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.125rem</code> (<code>18px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-xl</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 1.25rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>1.25rem</code> (<code>20px</code>).</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-xl</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.25rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.25rem</code> (<code>20px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-2xl</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 1.5rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>1.5rem</code> (<code>24px</code>).</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-2xl</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.5rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.5rem</code> (<code>24px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-3xl</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 1.875rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>1.875rem</code> (<code>30px</code>).</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-3xl</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 1.875rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>1.875rem</code> (<code>30px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-4xl</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 2.25rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>2.25rem</code> (<code>36px</code>).</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-4xl</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 2.25rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>2.25rem</code> (<code>36px</code>).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.text-5xl</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-size: 3rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the text size to <code>3rem</code> (<code>48px</code>).</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.text-5xl</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-size: 3rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the text size to <code>3rem</code> (<code>48px</code>).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -23,7 +23,7 @@ title: "Style & Decoration"
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-2/5">
|
||||
<col class="w-2/5">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -34,65 +34,65 @@ title: "Style & Decoration"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.italic</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">font-style: italic;</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.italic</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">font-style: italic;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Italicizes the text within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.roman</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">font-style: normal;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Sets the text to roman (disables italics) within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.roman</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">font-style: normal;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Sets the text to roman (disables italics) within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.uppercase</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-transform: uppercase;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Makes all text uppercase within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.uppercase</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: uppercase;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Makes all text uppercase within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.lowercase</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-transform: lowercase;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Makes all text lowercase within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.lowercase</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: lowercase;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Makes all text lowercase within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.capitalize</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-transform: capitalize;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Capitalizes the text within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.capitalize</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: capitalize;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Capitalizes the text within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.normal-case</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-transform: none;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Disables any text transformations previously applied to an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.normal-case</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-transform: none;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables any text transformations previously applied to an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.underline</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-decoration: underline;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Underlines the text within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.underline</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: underline;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Underlines the text within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.line-through</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-decoration: line-through;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Adds a line through the text within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.line-through</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: line-through;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Adds a line through the text within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.no-underline</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-decoration: none;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Disables any text decorations previously applied to an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.no-underline</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">text-decoration: none;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Disables any text decorations previously applied to an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.antialiased</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.antialiased</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
-webkit-font-smoothing: antialiased;<br>
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font smoothing of an element to antialiased.</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font smoothing of an element to antialiased.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.subpixel-antialiased</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.subpixel-antialiased</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
-webkit-font-smoothing: auto;<br>
|
||||
-moz-osx-font-smoothing: auto;
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font smoothing of an element to subpixel antialiasing (the default).</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the font smoothing of an element to subpixel antialiasing (the default).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -20,11 +20,11 @@ title: "Vertical Alignment"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -34,9 +34,9 @@ title: "Vertical Alignment"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.align-baseline</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">vertical-align: baseline;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Align the baseline of an element with the baseline of its parent</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.align-baseline</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">vertical-align: baseline;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Align the baseline of an element with the baseline of its parent.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.align-top</td>
|
||||
|
||||
@ -19,11 +19,11 @@ title: "Visibility"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/4">
|
||||
<col class="w-1/4">
|
||||
<col class="w-1/2">
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/4">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -33,9 +33,9 @@ title: "Visibility"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.visible</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">visibility: visible;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Make an element visible.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.visible</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">visibility: visible;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Make an element visible.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.invisible</td>
|
||||
|
||||
@ -20,6 +20,11 @@ title: "Whitespace & Wrapping"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/4">
|
||||
<col class="w-1/4">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -29,48 +34,48 @@ title: "Whitespace & Wrapping"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.whitespace-normal</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">white-space: normal;</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.whitespace-normal</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">white-space: normal;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Cause text to wrap normally within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.whitespace-no-wrap</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">white-space: nowrap;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Prevent text from wrapping within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-no-wrap</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: nowrap;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Prevent text from wrapping within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.whitespace-pre</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">white-space: pre;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Preserve line returns and spaces within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve line returns and spaces within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.whitespace-pre-line</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">white-space: pre-line;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Preserve line returns but not spaces within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre-line</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre-line;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve line returns but not spaces within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.whitespace-pre-wrap</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">white-space: pre-wrap;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Preserve spaces but not line returns within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.whitespace-pre-wrap</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">white-space: pre-wrap;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Preserve spaces but not line returns within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.break-words</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">word-wrap: break-word;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Allow unbreakable words to be broken within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.break-words</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">word-wrap: break-word;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow unbreakable words to be broken within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.break-normal</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">word-wrap: normal;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Break words only at allowed break points within an element.</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.break-normal</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">word-wrap: normal;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Break words only at allowed break points within an element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.truncate</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.truncate</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">
|
||||
overflow: hidden;<br>
|
||||
text-overflow: ellipsis;<br>
|
||||
white-space: nowrap;<br>
|
||||
</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Cause overflowing text within an element get to truncated with an ellipsis (<code>…</code>) if required.</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Cause overflowing text within an element get to truncated with an ellipsis (<code>…</code>) if required.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -20,11 +20,11 @@ title: "Width"
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
|
||||
@ -34,9 +34,9 @@ title: "Width"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 0.25rem;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>0.25rem</code>.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.w-1</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">width: 0.25rem;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the element's width to <code>0.25rem</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-2</td>
|
||||
@ -100,77 +100,77 @@ title: "Width"
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-auto</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: auto</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: auto;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>auto</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-px</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 1px</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 1px;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>1px</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/2</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 50%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 50%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>50%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/3</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 33.33333%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 33.33333%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>33.33333%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-2/3</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 66.66667%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 66.66667%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>66.66667%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/4</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 25%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 25%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>25%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-3/4</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 75%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 75%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>75%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/5</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 20%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 20%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>20%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-2/5</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 49%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 49%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>49%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-3/5</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 60%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 60%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>60%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-4/5</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 80%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 80%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>80%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-1/6</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 16.66667%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 16.66667%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>16.66667%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-5/6</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 83.33333%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 83.33333%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>83.33333%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-full</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 100%</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 100%;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>100%</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.w-screen</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 100vw</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">width: 100vw;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the element's width to <code>100vw</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -19,9 +19,9 @@ title: "Z-Index"
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
<col class="w-1/4">
|
||||
<col class="w-1/4">
|
||||
<col class="w-1/2">
|
||||
<col class="w-1/5">
|
||||
<col class="w-1/3">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -32,9 +32,9 @@ title: "Z-Index"
|
||||
</thead>
|
||||
<tbody class="align-baseline">
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-0</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">z-index: 0;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Set the z-index of the element to 0.</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.z-0</td>
|
||||
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">z-index: 0;</td>
|
||||
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the z-index of the element to 0.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.z-10</td>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user