Border color classes incorrectly target text color for elements

[Deleted user]

Describe the bug
While using border-color classes like border-green-400, border-red-500 etc, the colors are being applied onto color property for that element.

import React from "react";
import styled from "styled-wind";

const AppWrapper = styled.div`
  .text-center;
  .font-sans;
`;


const Button = styled.button`
  .bg-red-800;
  .hover:bg-red-400;
  .font-bold;
  .text-lg;
  .text-white;
  .rounded-lg;
  .border-green-400;
  .w-32;
  .p-2;
  .cursor-pointer;
`;

export default function App() {
  return (
    <AppWrapper>
      <h1>Buttons</h1>
      <Button>
        Button with White Text
      </Button>
    </AppWrapper>
  );
}

Expected behavior
Border color should be applied to border-color property of the element.
Text color should remain unaffected (i.e inherited or as set explicitly)

Desktop:

• OS: macOS BigSur
• Browser: Firefox 83.0
• Version : 0.0.0-beta.13

Additional context
Should be an easy fix. I will try to take this up too. Listing the issue for reference.

[Ameer Jhan]

awesome thanks @ArjithN

[Sudharsan GS]

@ameerthehacker I am working on this issue. Just FYI