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 badges + cheatsheet table for text style & decoration docs

Browse Source
This commit is contained in:
Jonathan Reinink 2017-10-31 13:40:00 -04:00
parent 44ca683f91
commit 6b47a4e149
1 changed files with 89 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
docs/source/docs/text-style.blade.md
View File

@ -5,8 +5,93 @@ title: "Style & Decoration"
# Style & Decoration
<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 text style of an element.
</div>
@include('_partials.feature-badges', [
'responsive' => true,
'customizable' => true,
'hover' => false,
'focus' => false
])
<div class="border-t border-grey-lighter">
<table class="w-full text-left" style="border-collapse: collapse;">
<colgroup>
<col class="w-1/5">
<col class="w-2/5">
<col class="w-2/5">
</colgroup>
<thead>
<tr>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
<th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
</tr>
</thead>
<tbody class="align-baseline">
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.italic</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">font-style: italic;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Italicizes the text within an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.roman</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">font-style: normal;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Sets the text to roman (disables italics) within an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.uppercase</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-transform: uppercase;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Makes all text uppercase within an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.lowercase</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-transform: lowercase;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Makes all text lowercase within an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.capitalize</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-transform: capitalize;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Capitalizes the text within an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.normal-case</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-transform: none;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Disables any text transformations previously applied to an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.underline</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-decoration: underline;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Underlines the text within an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.line-through</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-decoration: line-through;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Adds a line through the text within an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.no-underline</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">text-decoration: none;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Disables any text decorations previously applied to an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.antialiased</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">
-webkit-font-smoothing: antialiased;<br>
-moz-osx-font-smoothing: grayscale;
</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font smoothing of an element to antialiased.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark whitespace-no-wrap">.subpixel-antialiased</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark whitespace-no-wrap">
-webkit-font-smoothing: auto;<br>
-moz-osx-font-smoothing: auto;
</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Set the font smoothing of an element to subpixel antialiasing (the default).</td>
</tr>
</tbody>
</table>
</div>