playbooks

home / skills / fusengine / agents / tailwindcss-borders

tailwindcss-borders skill

/plugins/tailwindcss/skills/tailwindcss-borders

This skill helps you master Tailwind CSS borders by detailing border, outline, ring, and divide utilities for precise UI styling.

npx playbooks add skill fusengine/agents --skill tailwindcss-borders

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
1.6 KB
---
name: tailwindcss-borders
description: "Border utilities Tailwind CSS v4.1. Border (border-width, border-color, border-style, border-radius, rounded-*), Outline (outline-*, outline-offset), Ring (ring-*, ring-offset), Divide (divide-*)."
user-invocable: false
---

# Tailwind CSS Borders Skill

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

## Contents

- **Border Width** - `border`, `border-x`, `border-y`, `border-t`, `border-r`, `border-b`, `border-l`
- **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.1 Updates

- Default `ring` width changed from `3px` to `1px` (use `ring-3` for v3 behavior)
- Enhanced outline customization with `outline-offset`
- Improved border radius with corner-specific classes
- Better type safety with CSS variables in arbitrary values

Overview

This skill is a concise reference and utility guide for border-related Tailwind CSS v4.1 classes. It covers border width, color, style, radius, outlines, rings, and divide utilities, including per-side and corner-specific controls. The content highlights v4.1 changes and practical behaviors for responsive and state-driven styling.

How this skill works

The skill enumerates the prefix-based utilities Tailwind exposes for borders (border, border-x/y/t/r/b/l), border-color tokens, and border-style classes. It documents rounded corners and per-corner classes, outline width/color/offset, ring width/color/offset behavior, and divide utilities for spacing between children. It also notes updated defaults and how arbitrary values and CSS variables improve type safety and customization.

When to use it

  • When you need precise control of border widths and per-side styling in a UI component
  • When implementing accessible focus indicators using ring and outline utilities
  • When separating list items or grid children with divide utilities
  • When you need corner-specific radii for cards, buttons, or modal chrome
  • When migrating from Tailwind v3 to v4.1 and verifying ring and outline default changes

Best practices

  • Prefer design token color classes (border-{color}) to keep themes consistent
  • Use per-side utilities (border-t, border-l, etc.) instead of custom CSS where possible for clarity
  • Use ring utilities for focus states and keep ring width minimal (v4.1 default is 1px)
  • Combine outline-offset with outline color for accessible focus outlines without layout shifts
  • Use divide utilities for predictable spacing between child elements instead of manual borders

Example use cases

  • Create a card with rounded-tl and rounded-tr only, a subtle bottom border, and a focus ring on keyboard focus
  • Style a data table with divide-y classes and per-row border colors for separators
  • Build a button with border-solid, border-2, a theme token color, and rounded-full for pill shape
  • Apply ring-2 and ring-offset-2 with a contrasting ring color for accessible form controls
  • Use outline-2 and outline-offset to provide non-invasive focus styles for interactive elements

FAQ

What changed for ring defaults in v4.1?

The default ring width changed from 3px to 1px; use ring-3 to reproduce v3 behavior.

Can I apply different radii to each corner?

Yes. v4.1 includes corner-specific classes like rounded-tl, rounded-tr, rounded-bl, and rounded-br.