블로그를 처음 제작할 때 tailwind 사용 하기로 결정 했을 때 tailwind를 더욱 쉽게 작성하고 사용 할 수 있도록 해주는 twin.macro(Tailwind와 emotion 또는 Styled Components를 혼합 - 포스팅된 글은 emotion을 사용했다)에 대해 알아보았다.
twin.macro?
twin.macro
npm : https://www.npmjs.com/package/twin.macro
github : https://github.com/ben-rogerson/twin.macro#readme
NextJS 에서 사용 방법
설치
tailwind, emotion, twin.macro 설치
//emotion npm i @emotion/react @emotion/styled @emotion/css @emotion/server @emotion/babel-plugin // tailwind npm install -D tailwindcss npx tailwind init // twin.macro npm i -D twin.macro postcss@latest autoprefixer@latest // babel-plugin-macros npm i -D babel-plugin-macros
.babelrc
//.babelrc { "presets": ["next/babel"], "plugins": ["babel-plugin-macros"] }
tsconfig.json
"include": [ "**/*.d.ts", ],
postcss.config.js
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }
tailwind, tw, emotion 사용법
import { css } from "@emotion/react"; import tw, { styled } from "twin.macro"; export default function Test() { const TestDiv = tw.div` flex items-center justify-center w-[200px] h-[50px] bg-red-200 mx-auto `; const num = [0, 1, 2, 3, 4, 5, 7, 8]; const TestDivTwo = styled.div(({ number }: any) => [ tw` w-[100px] h-[50px] bg-red-200 mx-auto mt-2 `, css` position: relative; opacity: ${"0." + number}; &::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: "0${number}"; } `, ]); return ( <> <TestDiv>tw test</TestDiv> <div className="flex items-center w-[1000px] mx-auto mt-5"> {num.map((n) => ( <TestDivTwo key={n} number={n + 1} /> ))} </div> </> ); }
결과