[Feature Proposal] Add border-(l|t|r|b)-transparent

[borisk47]

Basically this:

.border-t-transparent {
  border-top-color: transparent;
}
.border-b-transparent {
  border-bottom-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-r-transparent {
  border-right-color: transparent;
}

I was building a callout and it would so easy with these utilities:

For example:

._callout.z-10.inline-block.relative.m-6.border.border-orange-400.rounded.shadow-md
  ._content.p-2.rounded.bg-yellow-100 
    Some content 
  ._arrow-down.ml-2.absolute.w-4.h-4.bg-yellow-100{class: ['',
    'transform origin-bottom-left rotate-45',
    'bottom-0 left-0',
    'border border-orange-400 border-t-transparent border-l-transparent',
    'rounded-br',],
    style: 'z-index:-1;'}

Obviously, the same technique could be used for building the arrow in any direction.
see it here: https://codepen.io/borisk47/pen/GRpvWbB

[DavydeVries]

You can override or extend the color palette of border colors with the following code:

Override:

// tailwind.config.js
module.exports = {
  theme: {
    borderColor: theme => ({
        'transparent': 'transparent'
    })
}

Extend:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
       borderColor: theme => ({
           'transparent': 'transparent'
       })
    }
}

[borisk47]

Thanks for your time Davy.
I checked: border-transparent is already present in the "standard" distribution.

I am talking specifically about targeting border on each side and not all sides. Am I missing something?