mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Update docs to make use of updated utilities
This commit is contained in:
parent
6fa259b142
commit
b661c0e526
@ -11,9 +11,9 @@
|
||||
<body class="pb-12">
|
||||
<div class="bg-gradient-brand h-3"></div>
|
||||
<header class="container">
|
||||
<div class="py-6 flex-y-center flex-spaced">
|
||||
<div class="flex-y-center">
|
||||
<div class="pill h-12 w-12 bg-light p-2 flex-center flex-inline shadow-2 mr-4">
|
||||
<div class="py-6 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="pill h-12 w-12 bg-light p-2 inline-flex items-center justify-center shadow-2 mr-4">
|
||||
<svg class="fit w-full" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<svg class="h-4" viewBox="0 0 136 19" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tailwind CSS">
|
||||
|
||||
@ -17,7 +17,7 @@ title: "Borders"
|
||||
|
||||
Construct border size utilities using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element. By default, borders are `solid`, and use the `@default-border-color`.
|
||||
|
||||
<div class="flex flex-top mt-8 text-sm leading-none">
|
||||
<div class="flex items-start mt-8 text-sm leading-none">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-dark-soft text-uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">border</code></div>
|
||||
|
||||
@ -93,9 +93,9 @@
|
||||
<div class="rounded-l w-128 text-center overflow-hidden">
|
||||
<img class="h-64" src="/img/card-left.jpg" alt="">
|
||||
</div>
|
||||
<div class="border-t border-r border-b border-dark-softer rounded-r p-4 flex-col flex-spaced">
|
||||
<div class="border-t border-r border-b border-dark-softer rounded-r p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-dark-softer flex-y-center">
|
||||
<p class="text-sm text-dark-softer flex items-center">
|
||||
<svg class="text-dark-softest w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
|
||||
Members only
|
||||
</p>
|
||||
@ -104,7 +104,7 @@
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-y-center">
|
||||
<div class="flex items-center">
|
||||
<img class="w-10 h-10 pill mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
|
||||
<div class="text-sm">
|
||||
<p class="text-dark leading-none">Jonathan Reinink</p>
|
||||
|
||||
@ -15,7 +15,7 @@ title: "Spacing"
|
||||
|
||||
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 flex-top mt-8 text-sm">
|
||||
<div class="flex items-start mt-8 text-sm">
|
||||
<div class="pr-12">
|
||||
<div class="mb-3 text-dark-soft text-uppercase">Class</div>
|
||||
<div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user