creating-custom-utilities
CommunityExtend Tailwind with powerful @utility patterns.
Authordjankies
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill shows how to create static, functional, and multi-value utilities with the @utility directive in Tailwind v4 to extend the design system efficiently.
Core Features & Use Cases
- Static Utilities: Simple, reusable utilities for common values.
- Functional Utilities: Parameterized utilities using --value tokens.
- Multi-Value Utilities: Utilities that combine multiple CSS properties.
Quick Start
Define a few utilities like content-auto and text-stroke-*, then apply them in HTML.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: creating-custom-utilities Download link: https://github.com/djankies/claude-configs/archive/main.zip#creating-custom-utilities Please download this .zip file, extract it, and install it in the .claude/skills/ directory.