Default border color of tailwind dont match with twin.macro

[azharakbar]

Hi,

The default border color in TailwindCSS v3.0 is

border-color: rgb(229 231 235 / var(--tw-border-opacity));

But in twin.macro @ v2.8.2,
it is

border-color: currentColor;

Please fix this

Sample Code

export const StyledElement= tw.a`
    border
`;

[azharakbar]

Or is there any workaround currently in 2.8.2 to update the defaults with Tailwind3 ?
@ben-rogerson

[zslabs]

This library is currently being updated to support Tailwind v3. For now, use a 2.x.x version of Tailwind. Follow #589 for more details.

[azharakbar]

@zslabs Thanks for the update
But, which one in the list of changes that are to be done relates to the default border-color fix?

[ben-rogerson]

The default border color in twin.macro@2.8.2 is set within the global styles and it works the same way in tailwindcss@v3.

You can set it with the default value in your tailwind config:

module.exports = {
  theme: {
    extend: {
      borderColor: {
        DEFAULT: 'currentColor',
      },
    },
  },
}

import { globalStyles } from "twin.macro";
globalStyles

// ↓ ↓ ↓ ↓ ↓ ↓

"*, ::before, ::after": {
    // ...
    "borderColor": "currentColor",
    // ...

The difference between the versions seems to be:

// v3
border-color: rgb(229 231 235 / var(--tw-border-opacity));

// v2
border-color: rgba(229, 231, 235, var(--tw-border-opacity));

These will be updated in the next version of twin.

[azharakbar]

@ben-rogerson
Hi,
Unfortunately, I was not able to override the defaults of twin.macro

I have changed tailwind.config.js to update the defaults

But still i get currentColor as the default from twin.macro

[azharakbar]

And also, what is the usecase of stiches ?

[ben-rogerson]

Just came across this patch from v3.0.12 - the fallback was changed to currentColor.

I'll make sure this is added in the v3 updates, follow along in #589

Stitches is a newer css-in-js library with a different api than emotion/styled-components. Check out their docs for more.

[ben-rogerson]

Closing this for now, after the next twin update, if this still doesn't sync with the latest version of tailwindcss, feel free to reopen.