mcpField
T
tailwindcss-borders

tailwindcss-borders

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

About tailwindcss-borders

A reference skill for Tailwind CSS v4.3 border-related utilities, intended for developers styling interface edges and focus states. It covers borders, radii, outlines, rings, and dividers, including version-specific changes.

Key features

  1. 01Border width, color, and style
  2. 02Per-side and logical borders
  3. 03Border radius by edge or corner
  4. 04Outline width, color, and offset
  5. 05Ring and ring-offset utilities
  6. 06Child divider utilities

Use cases

  1. 01Styling component borders
  2. 02Creating rounded corners
  3. 03Configuring focus outlines and rings
  4. 04Separating child elements

Install

Copy the command and run it in a terminal.

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

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

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