mcpField
T
tailwindcss-borders

tailwindcss-borders

github.com/fusengineDesign & UI3443 installsUpdated 2w ago
Repository

About tailwindcss-borders

tailwindcss-borders is a reference skill for border-related utilities in Tailwind CSS v4.3, aimed at developers styling interfaces. It covers borders, radii, outlines, rings, and child separators, including version-specific changes.

Key features

  1. 01Border width, color, and style
  2. 02Per-side and logical borders
  3. 03Radius and corner-specific classes
  4. 04Outline and offset settings
  5. 05Ring shadows and offsets
  6. 06Child-separation utilities

Use cases

  1. 01Look up border and radius classes
  2. 02Style keyboard-focus outlines
  3. 03Separate child elements

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fusengine/agents --skill tailwindcss-borders

After installing, type/tailwindcss-bordersin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
border.md
outline.md
ring.md

Details

From the project README
Complete reference for Tailwind CSS v4.3 border-related utilities: border width/color/style and per-side variants (including logical `border-bs`/`border-be`, since v4.2), `rounded-*` border-radius (including per-corner), `outline-*` with `outline-offset`, box-shadow-based `ring-*` with `ring-offset`, and `divide-*` separators between children.

Flags the v4.0 default ring width change (3px → 1px, use ring-3 for v3 behavior) and per-corner border-radius improvements.

Tailwind CSS Borders Skill

Complete reference for border-related utilities in Tailwind CSS v4.3.

Contents

  • Border Width - border, border-x, border-y, border-t, border-r, border-b, border-l, logical border-s, border-e, border-bs, border-be (block-start/end since v4.2)
  • Border Color - border-{color}, per-side border colors
  • Border Style - border-solid, border-dashed, border-dotted, border-double
  • Border Radius - rounded, rounded-t, rounded-r, rounded-b, rounded-l, rounded-tl, rounded-tr, rounded-bl, rounded-br, rounded-full
  • Outline - outline, outline-{width}, outline-{color}, outline-offset
  • Ring - ring, ring-{width}, ring-{color}, ring-offset, ring-offset-{color}
  • Divide - divide-x, divide-y, divide-{color}, divide-{style}

Key Features

  • Comprehensive border control with width, color, and style options
  • Per-side border customization for fine-grained control
  • Ring shadows as accessible focus indicators
  • Divide utilities for separating child elements
  • Full color palette support via design tokens
  • Responsive and state variants support

v4 Updates

  • Default ring width changed from 3px to 1px in v4.0 (use ring-3 for v3 behavior)
  • Logical block-axis borders border-bs-* / border-be-* (border-block-start / border-block-end) added in v4.2
  • Enhanced outline customization with outline-offset
  • Improved border radius with corner-specific classes
  • Better type safety with CSS variables in arbitrary values

Detailed References

  • border.md - Load when styling border width/color/style, border-radius, or per-side border patterns
  • outline.md - Load when configuring outline width/color/offset for focus and accessibility states
  • ring.md - Load when building box-shadow-based rings or divide-* separators between children

Comments

Markdown supported