twin.macro 사용법

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>
    </>
  );
}

 

 

결과