bbb2f41591
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
109 lines
3.0 KiB
Markdown
109 lines
3.0 KiB
Markdown
---
|
|
name: visual-border
|
|
description: Border width, color, style, and border radius
|
|
---
|
|
|
|
# Border
|
|
|
|
Utilities for border width, color, style, and radius.
|
|
|
|
## Usage
|
|
|
|
### Border width
|
|
|
|
```html
|
|
<div class="border">1px all sides</div>
|
|
<div class="border-2">2px</div>
|
|
<div class="border-0">No border</div>
|
|
|
|
<div class="border-t border-r border-b border-l">Per side</div>
|
|
<div class="border-x-2">Horizontal</div>
|
|
<div class="border-y">Vertical</div>
|
|
```
|
|
|
|
### Border color
|
|
|
|
```html
|
|
<div class="border border-gray-300">Gray border</div>
|
|
<div class="border-2 border-blue-500">Blue</div>
|
|
<div class="border border-red-500/50">With opacity</div>
|
|
```
|
|
|
|
### Border style
|
|
|
|
```html
|
|
<div class="border border-solid">Solid (default)</div>
|
|
<div class="border border-dashed">Dashed</div>
|
|
<div class="border border-dotted">Dotted</div>
|
|
<div class="border border-double">Double</div>
|
|
<div class="border border-none">None</div>
|
|
```
|
|
|
|
### Border radius
|
|
|
|
```html
|
|
<div class="rounded">Small (default)</div>
|
|
<div class="rounded-sm">2px</div>
|
|
<div class="rounded-md">6px</div>
|
|
<div class="rounded-lg">8px</div>
|
|
<div class="rounded-xl">12px</div>
|
|
<div class="rounded-2xl">16px</div>
|
|
<div class="rounded-full">Pill/circle</div>
|
|
<div class="rounded-none">0</div>
|
|
|
|
<div class="rounded-t-lg rounded-b-none">Per corner</div>
|
|
<div class="rounded-s-md rounded-e-xl">Logical (start/end)</div>
|
|
```
|
|
|
|
### Divide (between children)
|
|
|
|
```html
|
|
<div class="divide-y divide-gray-200">
|
|
<div>Item 1</div>
|
|
<div>Item 2</div>
|
|
<div>Item 3</div>
|
|
</div>
|
|
<div class="divide-x divide-gray-300 flex">
|
|
<div>Col 1</div>
|
|
<div>Col 2</div>
|
|
</div>
|
|
```
|
|
|
|
### Ring (focus outline)
|
|
|
|
```html
|
|
<button class="ring-2 ring-blue-500 ring-offset-2">Ring</button>
|
|
<button class="focus:ring-3 focus:ring-blue-500">Focus ring</button>
|
|
```
|
|
|
|
### Outline
|
|
|
|
Separate from border; used for focus states. In v4: `outline` = 1px; `outline-2`, `outline-4` for width. Use `outline-offset-2` for offset.
|
|
|
|
```html
|
|
<button class="outline outline-offset-2 outline-sky-500">Outline</button>
|
|
<button class="focus:outline-2 focus:outline-cyan-500">Focus outline</button>
|
|
<!-- Accessibility: invisible but visible in forced-colors -->
|
|
<button class="focus:outline-hidden">Focus outline-hidden</button>
|
|
```
|
|
|
|
v4: `outline-none` = `outline-style: none`; `outline-hidden` = invisible but shows in forced-colors mode.
|
|
|
|
## Key Points
|
|
|
|
- Width: `border`, `border-{0,2,4,8}`, `border-{t,r,b,l,x,y}`
|
|
- Color: `border-{color}`, opacity modifier
|
|
- Radius: `rounded-{size}`, `rounded-full`, `rounded-{t,r,b,l,s,e}-*`, logical `rounded-s-*`, `rounded-e-*`
|
|
- Divide: `divide-{x,y}`, `divide-{color}` for borders between flex/grid children
|
|
- Ring: `ring`, `ring-{n}`, `ring-{color}`, `ring-offset-{n}` (v4 default ring = 1px; use `ring-3` for 3px)
|
|
- Outline: `outline`, `outline-{n}`, `outline-{color}`, `outline-offset-{n}`, `outline-hidden`, `outline-none`
|
|
|
|
<!--
|
|
Source references:
|
|
- https://tailwindcss.com/docs/border-width
|
|
- https://tailwindcss.com/docs/border-color
|
|
- https://tailwindcss.com/docs/border-radius
|
|
- https://tailwindcss.com/docs/divide-width
|
|
- https://tailwindcss.com/docs/ring-width
|
|
-->
|