SkillsAdd

smithery/fusengine

tailwindcss-borders

Use when styling element borders, rounded corners, focus outlines/rings, or divide-* separators between children.

Installation

$ npx skills add smithery/fusengine --skill tailwindcss-borders
View on skills.sh ↗ Website ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

tailwindcss-advanced-layouts Similar name
josiahsiegel/claude-plugin-marketplace

Tailwind CSS advanced layout techniques including CSS Grid and Flexbox patterns. PROACTIVELY ac…

8K installs
tailwindcss Similar name
hairyf/skills

Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classe…

3K installs
tailwindcss-animations Similar name
josiahsiegel/claude-plugin-marketplace

Tailwind CSS animations and transitions including built-in utilities and custom keyframes. PROA…

2.3K installs
tailwindcss-mobile-first Similar name
josiahsiegel/claude-plugin-marketplace

Mobile-first responsive design patterns with Tailwind CSS v4 (2025-2026). PROACTIVELY activate …

2K installs
tailwindcss Similar name
mindrally/skills

Expert in TailwindCSS utility-first styling with responsive design patterns

1.4K installs
nextjs-typescript-tailwindcss-supabase Similar name
mindrally/skills

Full-stack Next.js 14 development with TypeScript, TailwindCSS, and Supabase for building produ…

1.2K installs

Also in this package

Other skills from smithery/fusengine · top by installs.

npx skills add smithery/fusengine
tailwindcss-v4 0 tailwindcss-typography 0 tailwindcss-responsive 0 tailwindcss-layout 0 tailwindcss-backgrounds 0 solid-detection 0 prompt-testing 0 nextjs-i18n 0 laravel-livewire 0 laravel-blade 0

Browse all from smithery/fusengine

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,384 B
  • docs SUMMARY.md 223 B

History

  1. First recorded snapshot · 0 installs

SKILL.md

<objective> Complete reference for Tailwind CSS v4.1 border-related utilities: border width/color/style and per-side variants, 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.1 default ring width change (3px → 1px, use ring-3 for v3 behavior) and per-corner border-radius improvements. </objective>

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

Detailed References

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