mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge branch 'master' of github.com:nothingworksinc/tailwindcss
This commit is contained in:
Jonathan Reinink
commit
3ada6f510e
@ -124,14 +124,7 @@
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/max-height" class="{{ $page->active('/docs/max-height') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Max-Height</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/docs/padding" class="block mb-2 {{ $page->active(['/docs/padding', '/docs/margin', '/docs/negative-margin']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a>
|
||||
<ul class="pl-4 {{ $page->active(['/docs/padding', '/docs/margin', '/docs/negative-margin']) ? 'block' : 'hidden' }}">
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/padding" class="{{ $page->active('/docs/padding') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Padding</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/margin" class="{{ $page->active('/docs/margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Margin</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/negative-margin" class="{{ $page->active('/docs/negative-margin') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Negative Margin</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/spacing" class="{{ $page->active('/docs/spacing') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Spacing</a></li>
|
||||
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/svg" class="{{ $page->active('/docs/svg') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">SVG</a></li>
|
||||
<li class="mb-3">
|
||||
<a href="{{ $page->baseUrl }}/docs/fonts" class="block mb-2 {{ $page->active(['/docs/fonts', '/docs/text-color', '/docs/text-sizing', '/docs/font-weight', '/docs/line-height', '/docs/letter-spacing', '/docs/whitespace-and-wrapping', '/docs/text-style']) ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Typography</a>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon, but in the mean time here's a quick class reference.</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon, but in the mean time here's a quick reference.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,8 +5,15 @@ title: "Cursor"
|
||||
|
||||
# Cursor
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the cursor style when hovering over an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@ -5,9 +5,19 @@ title: "Alerts"
|
||||
|
||||
# Alerts
|
||||
|
||||
We don't ship alert components because every app has it's own visual style and they are so easy to build out of utilities.
|
||||
|
||||
Here's a bunch of examples:
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon, but in the mean time here's a bunch of quick examples.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Traditional
|
||||
|
||||
@ -20,8 +30,6 @@ Here's a bunch of examples:
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Left Accent Border
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
@ -31,8 +39,6 @@ Here's a bunch of examples:
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Titled
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
@ -46,8 +52,6 @@ Here's a bunch of examples:
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Solid
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
@ -59,8 +63,6 @@ Here's a bunch of examples:
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Top Accent Border
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
@ -75,8 +77,6 @@ Here's a bunch of examples:
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Banner
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
|
||||
@ -5,11 +5,19 @@ title: "Buttons"
|
||||
|
||||
# Buttons
|
||||
|
||||
We don't ship any default button components because every app has it's own visual style and Tailwind tries to be as unopinionated as possible about how your project should look.
|
||||
|
||||
That said, buttons are easy to build by combining utility classes.
|
||||
|
||||
Here's a bunch of examples:
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon, but in the mean time here's a bunch of quick examples.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Simple
|
||||
|
||||
@ -43,8 +51,6 @@ Here's a bunch of examples:
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Pill
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
@ -53,8 +59,6 @@ Here's a bunch of examples:
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Outline
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
@ -63,8 +67,6 @@ Here's a bunch of examples:
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Bordered
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
@ -73,8 +75,6 @@ Here's a bunch of examples:
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Disabled
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
@ -83,8 +83,6 @@ Here's a bunch of examples:
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### 3D
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
@ -93,8 +91,6 @@ Here's a bunch of examples:
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Elevated
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
@ -103,8 +99,6 @@ Here's a bunch of examples:
|
||||
</button>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### Button Groups
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
@ -118,8 +112,6 @@ Here's a bunch of examples:
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
---
|
||||
|
||||
### w/Icon
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
|
||||
|
||||
@ -5,7 +5,19 @@ title: "Cards"
|
||||
|
||||
# Cards
|
||||
|
||||
We don't ship alert components because every app has it's own visual style, but they are easy af to make.
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed examples are coming soon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Classic card example
|
||||
|
||||
|
||||
@ -16,6 +16,8 @@ title: "Font Weight"
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -16,6 +16,8 @@ title: "Font Families"
|
||||
'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>
|
||||
|
||||
@ -16,6 +16,8 @@ title: "Letter Spacing"
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -16,6 +16,8 @@ title: "Line Height"
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -5,12 +5,15 @@ title: "Lists"
|
||||
|
||||
# Lists
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling list styles.
|
||||
</div>
|
||||
|
||||
Include documentation around:
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
- `list-reset` helper
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Margin"
|
||||
---
|
||||
|
||||
# Margin
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
</div>
|
||||
|
||||
<h2 id="usage">Using</h2>
|
||||
|
||||
The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-slate uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pull</code> Negative Margin</div>
|
||||
</div>
|
||||
<div class="pl-12 pr-12 border-l">
|
||||
<div class="mb-3 text-slate"><span class="uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
|
||||
</div>
|
||||
<div class="pl-12 border-l">
|
||||
<div class="mb-3 text-slate uppercase">Space</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="customizing">Customizing the spacing scale</h2>
|
||||
|
||||
You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
```css
|
||||
// Scale customization here
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
||||
The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes:
|
||||
|
||||
```html
|
||||
<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
|
||||
<div class="m-1 sm:m-2 md:m-3 lg:m-4"></div>
|
||||
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
|
||||
```
|
||||
|
||||
```css
|
||||
// Responsive example here
|
||||
```
|
||||
@ -1,67 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Padding"
|
||||
---
|
||||
|
||||
# Padding
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
</div>
|
||||
|
||||
<h2 id="usage">Using</h2>
|
||||
|
||||
The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-slate uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pull</code> Negative Margin</div>
|
||||
</div>
|
||||
<div class="pl-12 pr-12 border-l">
|
||||
<div class="mb-3 text-slate"><span class="uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">t</code> Top</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">r</code> Right</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">b</code> Bottom</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">l</code> Left</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">x</code> Horizontal</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">y</code> Vertical</div>
|
||||
</div>
|
||||
<div class="pl-12 border-l">
|
||||
<div class="mb-3 text-slate uppercase">Space</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">0</code> 0</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">1</code> 0.25rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">2</code> 0.5rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">3</code> 0.75rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">4</code> 1rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">6</code> 1.5rem</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="customizing">Customizing the spacing scale</h2>
|
||||
|
||||
You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
|
||||
```css
|
||||
// Scale customization here
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
||||
The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes:
|
||||
|
||||
```html
|
||||
<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
|
||||
<div class="m-1 sm:m-2 md:m-3 lg:m-4"></div>
|
||||
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
|
||||
```
|
||||
|
||||
```css
|
||||
// Responsive example here
|
||||
```
|
||||
@ -5,8 +5,15 @@ title: "Pointer Events"
|
||||
|
||||
# Pointer Events
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling whether an element responds to pointer events.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@ -5,8 +5,15 @@ title: "Resize"
|
||||
|
||||
# Resize
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the how an element can be resized.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@ -1,26 +1,31 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Negative Margin"
|
||||
title: "Padding"
|
||||
---
|
||||
|
||||
# Negative Margin
|
||||
# Spacing
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling an element's padding and margin.
|
||||
</div>
|
||||
|
||||
<h2 id="usage">Using</h2>
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero.
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem`, `.mx-0` would make the horizontal margin zero, and `.-mb-6` would add negative margin to the bottom of an element.
|
||||
|
||||
<div class="flex items-start mt-8 text-sm">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-slate uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">p</code> Padding</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">m</code> Margin</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">pull</code> Negative Margin</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">-m</code> Negative Margin</div>
|
||||
</div>
|
||||
<div class="pl-12 pr-12 border-l">
|
||||
<div class="mb-3 text-slate"><span class="uppercase">Position</span> <span class="text-slate-light text-xs">(optional)</span></div>
|
||||
@ -42,23 +47,3 @@ The syntax below is combined to create a system for padding and margins. For exa
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 font-mono border rounded">8</code> 2rem</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="customizing">Customizing the spacing scale</h2>
|
||||
|
||||
```css
|
||||
// Scale customization here
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
|
||||
The spacing utilities can also be used with [responsive](/docs/responsive-design) prefixes:
|
||||
|
||||
```html
|
||||
<div class="p-1 sm:p-2 md:p-3 lg:p-4"></div>
|
||||
<div class="m-1 sm:m-2 md:m-3 lg:m-4"></div>
|
||||
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
|
||||
```
|
||||
|
||||
```css
|
||||
// Responsive example here
|
||||
```
|
||||
@ -5,13 +5,14 @@ title: "SVG"
|
||||
|
||||
# SVG
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
<div class="mt-8">
|
||||
@include('_partials.work-in-progress')
|
||||
</div>
|
||||
|
||||
Documentation around things like:
|
||||
Tailwind doesn't provide SVG-specific utilites. Instead, use the generic sizing utilites to control an SVG's width and height, and the text color utilities to control an SVG's fill color.
|
||||
|
||||
- The `currentColor` trick in our base styles and using text color utilities to style SVG icons
|
||||
- Using sizing helpers to style SVGs
|
||||
@component('_partials.code-sample', ['class' => 'text-center'])
|
||||
<svg class="inline-block h-12 w-12 text-teal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M18 9.87V20H2V9.87a4.25 4.25 0 0 0 3-.38V14h10V9.5a4.26 4.26 0 0 0 3 .37zM3 0h4l-.67 6.03A3.43 3.43 0 0 1 3 9C1.34 9 .42 7.73.95 6.15L3 0zm5 0h4l.7 6.3c.17 1.5-.91 2.7-2.42 2.7h-.56A2.38 2.38 0 0 1 7.3 6.3L8 0zm5 0h4l2.05 6.15C19.58 7.73 18.65 9 17 9a3.42 3.42 0 0 1-3.33-2.97L13 0z"/>
|
||||
</svg>
|
||||
@endcomponent
|
||||
|
||||
@ -16,6 +16,8 @@ title: "Text Color"
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -16,6 +16,8 @@ title: "Text Sizing"
|
||||
'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>
|
||||
|
||||
@ -16,6 +16,8 @@ title: "Style & Decoration"
|
||||
'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>
|
||||
|
||||
@ -5,8 +5,15 @@ title: "User Select"
|
||||
|
||||
# User Select
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling whether the user can select text in an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
@ -16,6 +16,8 @@ title: "Vertical Alignment"
|
||||
'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>
|
||||
@ -64,35 +66,3 @@ title: "Vertical Alignment"
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
### Tables
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-8 text-grey-darker align-baseline">Baseline text<td>
|
||||
<td class="py-6 text-grey-darker align-top">Top-aligned text<td>
|
||||
<td class="py-4 text-grey-darker align-middle">Middle-aligned text<td>
|
||||
<td class="py-2 text-grey-darker align-bottom">Bottom-aligned text<td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@endcomponent
|
||||
|
||||
|
||||
### Inline-block Elements
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<div>
|
||||
<button class="align-middle text-blue-dark font-semibold py-2 px-4 border border-blue rounded mr-3">
|
||||
Button
|
||||
</button>
|
||||
<button class="align-middle bg-blue-dark text-white text-sm font-semibold py-1 px-3 border border-blue-dark rounded-full mr-3">
|
||||
Button
|
||||
</button>
|
||||
<button class="align-middle text-blue-dark font-semibold py-3 px-6 border border-blue rounded">
|
||||
Button
|
||||
</button>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
@ -5,9 +5,9 @@ title: "What is Tailwind?"
|
||||
|
||||
# What is Tailwind?
|
||||
|
||||
<div class="mt-8 text-xl text-grey-darker mb-8">
|
||||
<div class="mt-8 text-2xl text-grey-dark mb-8">
|
||||
<p>
|
||||
Tailwind is a CSS framework for rapidly building custom user interfaces.
|
||||
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -16,6 +16,8 @@ title: "Whitespace & Wrapping"
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user