mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Blank out background color page
This commit is contained in:
Adam Wathan
parent
3976cf9f3e
commit
e72f141594
@ -5,246 +5,15 @@ title: "Backgrounds"
|
||||
|
||||
# Background Color
|
||||
|
||||
<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 background color.
|
||||
</div>
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => true,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-slate-dark bg-slate-lighter px-6 py-4 text-sm">
|
||||
.bg-slate-lighter
|
||||
</div>
|
||||
<div class="text-white bg-slate-light px-6 py-4 text-sm">
|
||||
.bg-slate-light
|
||||
</div>
|
||||
<div class="text-white bg-slate px-6 py-4 text-sm">
|
||||
.bg-slate
|
||||
</div>
|
||||
<div class="text-white bg-slate-dark px-6 py-4 text-sm">
|
||||
.bg-slate-dark
|
||||
</div>
|
||||
<div class="text-white bg-slate-darker px-6 py-4 text-sm">
|
||||
.bg-slate-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-slate-dark bg-smoke-lighter px-6 py-4 text-sm">
|
||||
.bg-smoke-lighter
|
||||
</div>
|
||||
<div class="text-slate-dark bg-smoke-light px-6 py-4 text-sm">
|
||||
.bg-smoke-light
|
||||
</div>
|
||||
<div class="text-slate-dark bg-smoke px-6 py-4 text-sm">
|
||||
.bg-smoke
|
||||
</div>
|
||||
<div class="text-slate-dark bg-smoke-dark px-6 py-4 text-sm">
|
||||
.bg-smoke-dark
|
||||
</div>
|
||||
<div class="text-white bg-smoke-darker px-6 py-4 text-sm">
|
||||
.bg-smoke-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-red bg-red-lighter px-6 py-4 text-sm">
|
||||
.bg-red-lighter
|
||||
</div>
|
||||
<div class="text-white bg-red-light px-6 py-4 text-sm">
|
||||
.bg-red-light
|
||||
</div>
|
||||
<div class="text-white bg-red px-6 py-4 text-sm">
|
||||
.bg-red
|
||||
</div>
|
||||
<div class="text-white bg-red-dark px-6 py-4 text-sm">
|
||||
.bg-red-dark
|
||||
</div>
|
||||
<div class="text-white bg-red-darker px-6 py-4 text-sm">
|
||||
.bg-red-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-orange-darker bg-orange-lighter px-6 py-4 text-sm">
|
||||
.bg-orange-lighter
|
||||
</div>
|
||||
<div class="text-orange-darker bg-orange-light px-6 py-4 text-sm">
|
||||
.bg-orange-light
|
||||
</div>
|
||||
<div class="text-orange-darker bg-orange px-6 py-4 text-sm">
|
||||
.bg-orange
|
||||
</div>
|
||||
<div class="text-white bg-orange-dark px-6 py-4 text-sm">
|
||||
.bg-orange-dark
|
||||
</div>
|
||||
<div class="text-white bg-orange-darker px-6 py-4 text-sm">
|
||||
.bg-orange-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-yellow-darker bg-yellow-lighter px-6 py-4 text-sm">
|
||||
.bg-yellow-lighter
|
||||
</div>
|
||||
<div class="text-yellow-darker bg-yellow-light px-6 py-4 text-sm">
|
||||
.bg-yellow-light
|
||||
</div>
|
||||
<div class="text-yellow-darker bg-yellow px-6 py-4 text-sm">
|
||||
.bg-yellow
|
||||
</div>
|
||||
<div class="text-yellow-darker bg-yellow-dark px-6 py-4 text-sm">
|
||||
.bg-yellow-dark
|
||||
</div>
|
||||
<div class="text-white bg-yellow-darker px-6 py-4 text-sm">
|
||||
.bg-yellow-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-green-darker bg-green-lighter px-6 py-4 text-sm">
|
||||
.bg-green-lighter
|
||||
</div>
|
||||
<div class="text-green-darker bg-green-light px-6 py-4 text-sm">
|
||||
.bg-green-light
|
||||
</div>
|
||||
<div class="text-white bg-green px-6 py-4 text-sm">
|
||||
.bg-green
|
||||
</div>
|
||||
<div class="text-white bg-green-dark px-6 py-4 text-sm">
|
||||
.bg-green-dark
|
||||
</div>
|
||||
<div class="text-white bg-green-darker px-6 py-4 text-sm">
|
||||
.bg-green-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-teal-darker bg-teal-lighter px-6 py-4 text-sm">
|
||||
.bg-teal-lighter
|
||||
</div>
|
||||
<div class="text-teal-darker bg-teal-light px-6 py-4 text-sm">
|
||||
.bg-teal-light
|
||||
</div>
|
||||
<div class="text-white bg-teal px-6 py-4 text-sm">
|
||||
.bg-teal
|
||||
</div>
|
||||
<div class="text-white bg-teal-dark px-6 py-4 text-sm">
|
||||
.bg-teal-dark
|
||||
</div>
|
||||
<div class="text-white bg-teal-darker px-6 py-4 text-sm">
|
||||
.bg-teal-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-blue-darker bg-blue-lighter px-6 py-4 text-sm">
|
||||
.bg-blue-lighter
|
||||
</div>
|
||||
<div class="text-blue-darker bg-blue-light px-6 py-4 text-sm">
|
||||
.bg-blue-light
|
||||
</div>
|
||||
<div class="text-white bg-blue px-6 py-4 text-sm">
|
||||
.bg-blue
|
||||
</div>
|
||||
<div class="text-white bg-blue-dark px-6 py-4 text-sm">
|
||||
.bg-blue-dark
|
||||
</div>
|
||||
<div class="text-white bg-blue-darker px-6 py-4 text-sm">
|
||||
.bg-blue-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4 mb-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-indigo-darker bg-indigo-lighter px-6 py-4 text-sm">
|
||||
.bg-indigo-lighter
|
||||
</div>
|
||||
<div class="text-indigo-darker bg-indigo-light px-6 py-4 text-sm">
|
||||
.bg-indigo-light
|
||||
</div>
|
||||
<div class="text-white bg-indigo px-6 py-4 text-sm">
|
||||
.bg-indigo
|
||||
</div>
|
||||
<div class="text-white bg-indigo-dark px-6 py-4 text-sm">
|
||||
.bg-indigo-dark
|
||||
</div>
|
||||
<div class="text-white bg-indigo-darker px-6 py-4 text-sm">
|
||||
.bg-indigo-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-purple-darker bg-purple-lighter px-6 py-4 text-sm">
|
||||
.bg-purple-lighter
|
||||
</div>
|
||||
<div class="text-purple-darker bg-purple-light px-6 py-4 text-sm">
|
||||
.bg-purple-light
|
||||
</div>
|
||||
<div class="text-white bg-purple px-6 py-4 text-sm">
|
||||
.bg-purple
|
||||
</div>
|
||||
<div class="text-white bg-purple-dark px-6 py-4 text-sm">
|
||||
.bg-purple-dark
|
||||
</div>
|
||||
<div class="text-white bg-purple-darker px-6 py-4 text-sm">
|
||||
.bg-purple-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="rounded overflow-hidden">
|
||||
<div class="text-pink-darker bg-pink-lighter px-6 py-4 text-sm">
|
||||
.bg-pink-lighter
|
||||
</div>
|
||||
<div class="text-pink-darker bg-pink-light px-6 py-4 text-sm">
|
||||
.bg-pink-light
|
||||
</div>
|
||||
<div class="text-white bg-pink px-6 py-4 text-sm">
|
||||
.bg-pink
|
||||
</div>
|
||||
<div class="text-white bg-pink-dark px-6 py-4 text-sm">
|
||||
.bg-pink-dark
|
||||
</div>
|
||||
<div class="text-white bg-pink-darker px-6 py-4 text-sm">
|
||||
.bg-pink-darker
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Using the utilities in HTML:
|
||||
|
||||
```html
|
||||
<div class="bg-white"></div>
|
||||
<div class="bg-smoke-lighter"></div>
|
||||
<div class="bg-smoke-light"></div>
|
||||
<div class="bg-smoke"></div>
|
||||
|
||||
<div class="bg-slate-darker"></div>
|
||||
<div class="bg-slate-dark"></div>
|
||||
<div class="bg-slate"></div>
|
||||
<div class="bg-slate-light"></div>
|
||||
```
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user