archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add basic container docs

Browse Source
This commit is contained in:
Adam Wathan 2017-10-31 21:07:25 -04:00
parent 06e3a50933
commit 8eb9791bc7
1 changed files with 61 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
docs/source/docs/container.blade.md
View File

@ -9,11 +9,65 @@ title: "Container"
A component for fixing an element's width to the current breakpoint.
</div>
@include('_partials.feature-badges', [
'responsive' => true,
'customizable' => true,
'hover' => false,
'focus' => false
])
@include('_partials.work-in-progress')
<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>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Breakpoint</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
</tr>
</thead>
<tbody class="align-baseline">
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark" rowspan="5">.container</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-grey-dark"><span class="italic">None</span></td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">width: 100%;</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">sm <span class="text-grey-dark italic">(576px)</span></td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 576px;</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">md <span class="text-grey-dark italic">(768px)</span></td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 768px;</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">lg <span class="text-grey-dark italic">(992px)</span></td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 992px;</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-grey-darker">xl <span class="text-grey-dark italic">(1200px)</span></td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">max-width: 1200px;</td>
</tr>
</tbody>
</table>
</div>
Tailwind's `.container` class sets the `max-width` of an element to match the `min-width` of the current breakpoint.
Note that unlike containers you might have used in other frameworks, **Tailwind's container does not center itself automatically and does not contain any built-in horizontal padding.**
To center a container, use the `.mx-auto` utility:
```html
<div class="container mx-auto">
<!-- ... -->
</div>
```
To add horizontal padding, use the `.px-{size}` utilities:
```html
<div class="container mx-auto px-4">
<!-- ... -->
</div>
```