use of css attributes results in css="[object Object]"

import "twin.macro";

tw="border-2 border-red-400"

Results in:

[xairoo]

A bit more detailed… how to enable css prop in react (https://emotion.sh/docs/css-prop)!

I use craco with create-react-app to modify webpack, babel, …

Just install @emotion/babel-preset-css-prop and add it to your craco.config.js:

module.exports = {
	babel: {
		presets: ['@emotion/babel-preset-css-prop'],
		plugins: [],
		loaderOptions: {
			/* Any babel-loader configuration options: https://github.com/babel/babel-loader. */
		},
		loaderOptions: (babelLoaderOptions, { env, paths }) => {
			return babelLoaderOptions;
		},
	],
};

Thanks for twin.macro!

[ben-rogerson]

If you want something to compare your setup with, I’ve got an example using gatsby-plugin-emotion and the css prop.