Emotion + Tailwind — twin.macro
Published in
1 min readJan 17, 2023
The current Nextjs project uses Tailwind css and we want to bring in styled component. Our team decided to use Emotion + Tailwind.
Emotion
A package similar to styled-component package but works well with Tailwind css
A few packages that we want to pay attention to
@emotion/core: main package
@emotion/react: integrate Emotion with React, it includes all the functionality of @emotion/core
@emotion/styled: get the styled
to create styled component
@emotion/css: use Emotion with traditional CSS
It should be good enough to install @emotion/react
and @emotion/styled
The reason to choose twin.macro
over other packages
Setup guild
package.json
dev dependency: babel-plugin-twin
, twin.macro
add this block at the bottom of package.json
"babelMacros": {
"twin": {
"preset": "emotion"
}
}
.babelrc
{
"presets": [
[
"next/babel",
{
"preset-react": {
"runtime": "automatic",
"importSource": "@emotion/react"
}
}
]
],
"plugins": [
"@emotion/babel-plugin",
"babel-plugin-twin",
"babel-plugin-macros"
]
}