Feature: automatically applied `border` utility when adding a color utility like `border-graylight`
See original GitHub issueI often find myself having styling like this <div class="border border-light-400">
in my codebase. I’m getting a bit tired of adding the border
utility first.
Can one of UnoCSS’s presets automatically add the border
utility when I only specify <div class="border-light-400">
?
A bit like how the transform
utility works now.
Issue Analytics
- State:
- Created a year ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Utilities · Basecoat
Basecoat has margin and padding utility classes that you can add to any element. ... .border-gray-light { border-color: $border-gray-light !important; } ...
Read more >Color and border properties in Power Apps - Microsoft Learn
ColorValue function: Specify text strings such as color names from ... Color, automatically cascading a change from one property to another.
Read more >border-color - CSS: Cascading Style Sheets - MDN Web Docs
The border-color property may be specified using one, two, three, or four values. When one value is specified, it applies the same color...
Read more >Border | U.S. Web Design System (USWDS)
Border. Set width, color, style, and radius of an item's borders ... Note: The border utilities apply a solid border of specified width....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
see playground
The later in the
rules
that matched will have higher priority.https://uno.antfu.me/play/?html=DwEwlgbgBAxgNgQwM5ILwCIBOBXOBTdAPgAk844B7AGigHcLM4QBCYAenAkKA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAqrhJQL5xZQQhwDkAV1YBjOnX5IkGAB6RY6bAENBAG3iYc%2BIiWCkAFMlRQ19AFxwA2lVSWA9CdUY75OPoCUcALwA%2BNwjhHDAsARjh2dwBdSlRbB1MXN09ff0DTCwAmcKjXOzs4GAALYDo4ErgQJRgRQow0KkikCKQgA&options=N4IgLgTghgdgzgMwPYQLYgFwKgGzgUwF8g