GlobalyStyles from "twin.macro" ruins some component styling, help needed.

[FranciscoKloganB]

Hey guys!

Just finished transitioning from tailwind-styled-components to twin.macro. First and foremost thank you for the amazing project. It will surely help me clean up some components.

As guide for my setup, configurations, and code. I followed the example in twin.examples for Next.js. However, I am facing a minor issue with some rendered UI. The issue only occurs when I use import { css, GlobalStyles as BaseStyles } from "twin.macro" and use like exemplified:

export default function AppStyles() {
  return (
    <>
      // If I delete the line below my pages are output exactly as before the migration - what would be the consequences of doing this?
      <BaseStyles /> 
      <Global styles={customStyles} />
    </>
  )
}

I am using TailwindCSS 3.2 and Twin.Macro latest release candidate

Screenshots of the issues I detected and how they should look:

Before:

After:

Questions:

• What exactly does twin.macro#GlobalStyles do?

  • To my understanding this is a set of preflight styles that should be the same as @tailwind base plus some keyframes directives
  • So why is the output different? Anything I am missing?

• What are the consequences of not using twin.macro#GlobalStyles and instead just importing @tailwind base.

  • What will I miss out on?

Newbie version of the question

Given my current styles/globals.css (file below) is my translation to GlobalStyles.tsx correct?

Previous Global Styles (CSS):

// Existing `styles/globals.css`
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "vendor/css/leaflet.css";
@import "vendor/css/swiper.css";

html,
body,
#__next {
  @apply h-full;
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

New Global Styles (JS Twin Style):

import { Global } from "@emotion/react"
import { css, GlobalStyles as BaseStyles } from "twin.macro"

import "tailwindcss/base.css"
import "tailwindcss/components.css"
import "tailwindcss/utilities.css"

const customStyles = css({
  "html, body, #__next": {
    height: "100%",
    padding: 0,
    margin: 0,
    "font-family": `
      -apple-system,
      BlinkMacSystemFont,
      Segoe UI,
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      Fira Sans,
      Droid Sans,
      Helvetica Neue,
      sans-serif
    `
  },
  a: {
    color: "inherit",
    "text-decoration": "none"
  },
  "*": {
    "box-sizing": "border-box"
  }
})

export default function AppStyles() {
  return (
    <>
      <BaseStyles />
      <Global styles={customStyles} />
    </>
  )
}

[JPrisk]

What exactly does twin.macro#GlobalStyles do? To my understanding this is a set of preflight styles that should be the same as @tailwind base plus some keyframes directives

yes, that is accurate

What are the consequences of not using twin.macro#GlobalStyles and instead just importing @tailwind base.

this might confuse the order of global styles causing some inheritance issues, it could be that the utility classes are getting overwritten by the css reset

when using twin.macro you do not need to import each of the css partials therefore you can remove these three lines:

- import "tailwindcss/base.css"
- import "tailwindcss/components.css"
- import "tailwindcss/utilities.css"

hope that helps

[FranciscoKloganB]

Hmm, alright. This is interesting. I must be doing something wrong because I lose all my styles when I remove those. Thanks for the help. I will try to find out whatever it is I am missing and report back to the community once I am done. Whether I solved it or not! :)

Edit:

question: I am wondering... This might be my issue. I was expecting twin to allow me to use styled-components when desired (opt-in) while allowing me to write plain old tailwind using className when desired. However, I have not seen any example that proves my theory. So I am starting to assume, that class stylings are not being applied because I was expecting my <div className="px-8 ...otherclasses" /> to be picked up by tailwind as before. I do not have the time now to try and validate if this is indeed the issue, but if someone can confirm in the meantime.

🗡️

[ben-rogerson]

There's a middlepoint where you're using tailwind and twin - not a great place to be as it's a messy experience. Should be possible to have both running, tailwind should be able to visit your className's in js files if you've configured your content property in your tailwind.config.js.

[FranciscoKloganB]

Hey @ben-rogerson, @JPrisk I was able to complete my refactor without breaking changes/bugs, my issue was the one already mentioned above by me and @ben-rogerson. I was mixing apples with potatoes. After using css and tw props everything started working as intended.

Thank you both for your assistance.

[JPrisk]

Awesome, nice work! glad to hear that your migration was a success 🎉

[therealgilles]

If you are using emotion, I have found that it's better to combine base and custom global styles this way:

const customStyles = css([
	BaseStyles as TwStyle,
    {
        ... custom global styles here
    }
])

otherwise the order of BaseStyles vs custom global styles will be reversed on hot module replacement.