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

Who knows

Browse Source
This commit is contained in:
Adam Wathan 2017-08-15 13:55:41 -04:00
parent e881b69bf5
commit dac88161f3
5 changed files with 54 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
docs/source/backgrounds.md
View File

@ -39,12 +39,20 @@ title: "Backgrounds"
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-red-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-amber border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-amber</code></td>
<td class="w-24 h-12 bg-orange border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-orange</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-amber-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-amber-light</code></td>
<td class="w-24 h-12 bg-orange-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-orange-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-yellow border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-yellow-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-yellow-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-green border-b border-dark-overlay-softer"></td>
@ -54,6 +62,14 @@ title: "Backgrounds"
<td class="w-24 h-12 bg-green-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-green-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-teal border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-teal</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-teal-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-teal-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-blue border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-blue</code></td>
@ -70,6 +86,22 @@ title: "Backgrounds"
<td class="w-24 h-12 bg-indigo-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-indigo-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-purple border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-purple</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-purple-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-purple-light</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-pink border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-pink</code></td>
</tr>
<tr>
<td class="w-24 h-12 bg-pink-light border-b border-dark-overlay-softer"></td>
<td class="border-b border-dark-overlay-softer py-3 px-6" style="vertical-align: middle;"><code>.bg-pink-light</code></td>
</tr>
</table>
Using the utilities in HTML:

10
src/colors.less
View File

@ -13,16 +13,18 @@
@color-red: #f25451;
@color-red-light: #fa8785;
@color-amber: #ffd129;
@color-amber-light: #ffedad;
@color-orange: #ffb447;
@color-orange-light: #ffce85;
@color-yellow: #ffed4a;
@color-yellow-light: #fff6a5;
@color-green: #77d48a;
@color-green-light: #b1f3be;
@color-teal: #4dc0b5;
@color-teal-light: #92e0d8;
@color-blue: #4aa2ea;
@color-blue-light: #acdaff;
@color-indigo: #6b64cc;
@color-indigo-light: #a9a4ed;
@color-indigo: #6574cd;
@color-indigo-light: #a3aeed;
@color-purple: #976ae6;
@color-purple-light: #ceb3ff;
@color-pink: #f66d9b;

6
src/utilities/backgrounds.less
View File

@ -9,8 +9,10 @@
'red' @color-red,
'red-light' @color-red-light,
'amber' @color-amber,
'amber-light' @color-amber-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'green' @color-green,
'green-light' @color-green-light,
'teal' @color-teal,

6
src/utilities/borders.less
View File

@ -45,8 +45,10 @@
'red' @color-red,
'red-light' @color-red-light,
'amber' @color-amber,
'amber-light' @color-amber-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'green' @color-green,
'green-light' @color-green-light,
'teal' @color-teal,

6
src/utilities/text.less
View File

@ -69,8 +69,10 @@
'red' @color-red,
'red-light' @color-red-light,
'amber' @color-amber,
'amber-light' @color-amber-light,
'orange' @color-orange,
'orange-light' @color-orange-light,
'yellow' @color-yellow,
'yellow-light' @color-yellow-light,
'green' @color-green,
'green-light' @color-green-light,
'teal' @color-teal,