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 docs for rounding sides separately

Browse Source
This commit is contained in:
Adam Wathan 2017-10-30 17:55:54 -04:00
parent 2ec8237481
commit e6a78937aa
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/source/docs/border-radius.blade.md
View File

@ -127,9 +127,26 @@ Use `.rounded-none` to remove an existing border radius from an element.
This is most commonly used to remove a border radius that was applied at a smaller breakpoint.
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8'])
<div class="p-4 shadow-none bg-grey-light">.shadow-none</div>
<div class="p-4 rounded-none bg-grey-light">.rounded-none</div>
@slot('code')
<div class="shadow-none"></div>
<div class="rounded-none"></div>
@endslot
@endcomponent
## Rounding sides separately
Use the `.rounded-t`, `.rounded-r`, `.rounded-b`, or `.rounded-l` utilities to only round one side of an element.
@component('_partials.code-sample', ['class' => 'flex justify-around text-sm'])
<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-t">.rounded-t</div>
<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-r">.rounded-r</div>
<div class="bg-grey-light mr-3 p-4 rounded-lg rounded-b">.rounded-b</div>
<div class="bg-grey-light p-4 rounded-lg rounded-l">.rounded-l</div>
@slot('code')
<div class="rounded-t"></div>
<div class="rounded-r"></div>
<div class="rounded-b"></div>
<div class="rounded-t"></div>
@endslot
@endcomponent

5
docs/source/mix-manifest.json Normal file
View File

@ -0,0 +1,5 @@
{
"/js/app.js": "/js/app.js?id=d0e10505c3df7d94bf87",
"/js/nav.js": "/js/nav.js?id=d3b9e827e277824739e0",
"/css/main.css": "/css/main.css?id=0918e28676fcaa4f5838"
}