question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature: automatically applied `border` utility when adding a color utility like `border-graylight`

See original GitHub issue

I 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:closed
  • Created a year ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
SnowingFoxcommented, Sep 6, 2022
Unocss({
    preset: [...],
    postprocess: (util) => {
        if (/^\.border-(.*)$/.test(util.selector)) {
           util.entries.push(...[
            	['border-width', '1px'],
              	['border-style', 'solid']
            ])
        }
    },
})

see playground

Read more comments on GitHub >

github_iconTop Results From Across the Web

Border Color - Tailwind CSS
Utilities for controlling the color of an element's borders.
Read more >
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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found