twin.macro v3 introduces new unwanted styles with GlobalStyles object

[zsombor-guti]

Hello!

I've upgraded to twin.macro 3.1.0 a few days ago on an internal UI library and started noticing a few weird things, the main one being that my coloured-background buttons disappeared. After investigating, I've found that the GlobalStyles object introduces a few weird styles, which it didn't before. The cause of this is the following part:

button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

I have tried playing around with the tailwindcss version but nothing seemed to have an effect, only if I dropped my twin.macro version back to 2.8.2. I am also using styled-components, which is currently at version 5.3.6.

My GlobalStyles config (which is exported from the UI library and imported into the app's app.jsx file):

import React from "react";
import { createGlobalStyle } from "styled-components";
import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro";

const CustomStyles = createGlobalStyle`...`;

export const GlobalStyles = () => (
    <>
        <BaseStyles />
        <CustomStyles />
    </>
);

Was this change intentional? How can I turn off these extra styles? I would only need the default @tailwind styles.

[ben-rogerson]

Hi there!

This change is due to tailwindcss updating their preflight.css styles rather than a deviation in twin.

A quick fix would be to overwrite those base styles with some of your own within your CustomStyles ~object~ string.

[apuntovanini]

This is very difficult to override without using important! or some other tweaks inside the components. The background-color: transparent is set and the component has a lower specifier, thus never get the proper color How would you suggest overriding this? Thanks!

[zsombor-guti]

Thank you Ben for the clarification.

@apuntovanini indeed it is hard, I am facing the same problem. I have to use an internal CSS library, which does set the background-color for buttons, but somehow the new preflight styles override all of them which do not have :hover/:active/etc selectors due to the lower specifier level.

[apuntovanini]

I see a discussion open in tailwind repo https://github.com/tailwindlabs/tailwindcss/discussions/10284 originated from something similar to what we're experiencing https://github.com/tailwindlabs/tailwindcss/issues/10282

As @ben-rogerson suggested it may be a tailwind issue not twin

[ben-rogerson]

Another option can be to filter out the unwanted styles - rather than overwrite them. For that you can use the globalStyles import which will give you an object you can work with.

Something like this:

import React from "react";
import { createGlobalStyle } from "styled-components";
import { globalStyles } from "twin.macro";

const filteredGlobalStyles = Object.fromEntries(
    Object.entries(globalStyles).filter(
                  // Add filter
         )
)

const CustomStyles = createGlobalStyle(filteredGlobalStyles);

export const GlobalStyles = () => (
    <>
        <CustomStyles />
    </>
);

[apuntovanini]

Love it!

const filteredGlobalStyles = Object.fromEntries(
  Object.entries(globalStyles).filter(
    (k, v) =>
      k[0] !== "button, [type='button'], [type='reset'], [type='submit']",
  ),
);

const CustomStyles = createGlobalStyle`
  ${filteredGlobalStyles}

this is my implementation for the button isse @zsombor-guti if you need it! Thanks @ben-rogerson