Global styles

[itsMapleLeaf]

Is there some elegant way to apply global styles, similar to Emotion's <Global> api?

	useEffect(() => {
		document.body.parentElement!.className = tw`text-gray-100 break-words bg-gray-900`
	}, [])

Right now, I have this in my App component as a workaround. This doesn't remove styles on unmount, nor does it server render. Does the css() function have this capability?

[sastan]

Take look at setup preflight

[itsMapleLeaf]

Nice! For future reading, here's how I did it for my example:

	preflight: (preflight, { theme }) => ({
		...preflight,
		":root": {
			backgroundColor: theme("colors.gray.900"),
			color: theme("colors.gray.100"),
			overflowWrap: "break-word",
		},
	}),

Though I wonder if there's a way to use tw here, like I would @apply with vanilla tailwind? Here was my attempt at that, but the styles didn't apply correctly

	preflight: (preflight, { tw }) => ({
		...preflight,
		":root": tw`bg-gray-900 text-gray-100 break-word`,
	}),

[sastan]

I Think the following should work as well:

setup({
  preflight: {
    ":root": ({ theme }) => ({
      backgroundColor: theme("colors.gray.900"),
      color: theme("colors.gray.100"),
      overflowWrap: "break-word",
    }),
  },
})

Regarding @apply: That is because our twfunction always return a string with class names while twind.macro return an css object. We have identity two cases (preflight and styled #7) where it may be beneficial to return the css object. Once we have solved that for styled it may solved for preflight as well.