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 position documentation.

Browse Source
This commit is contained in:
Jonathan Reinink 2017-08-03 07:59:40 -04:00
parent a48bd9c22c
commit dd480cf56a
1 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/source/position.blade.php
View File

@ -4,4 +4,42 @@
<h1 class="title">Position</h1>
<p class="mt-6 mb-3 text-dark-soft">The position utilities are primarily <code>position</code> display property helpers.</p>
<p class="mt-6 mb-3">Using the utilities in HTML:</p>
<pre class="language-html"><code>{{ '<div class="fixed"></div>
<div class="absolute"></div>
<div class="relative"></div>' }}</code></pre>
<p class="mt-6 mb-3">Using the utilities in Less:</p>
<pre class="language-less"><code>div {
.fixed;
.absolute;
.relative;
}</code></pre>
<h2 class="subtitle">Pinning absolute content</h2>
<p class="mt-6 mb-3">Tailwind also provides pin utilties, useful for "pinning" absolutely positioned elements using the <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> properties.</p>
<p class="mt-6 mb-3">Using the utilities in HTML:</p>
<pre class="language-html"><code>{{ '<div class="relative">
<div class="absolute pin-t"></div>
</div>' }}</code></pre>
<p class="mt-6 mb-3">Using the utilities in Less:</p>
<pre class="language-less"><code>div {
.pin-t
.pin-r
.pin-b
.pin-l
.pin-y
.pin-x
.pin
}</code></pre>
@endsection