Styled Components with Tailwind CSS

기존에 CSS in JS 라이브러리로 Styled Components를 사용 중에 이전에 사용해 경험이 좋았던 Tailwind CSS를 도입하여 같이 사용해 보기로 했습니다. Tailwind CSS의 클래스들을 CSS Objects로 변환하여 Styled Components나 emotion 같은 CSS in Js 라이브러리에서 해당 클래스를 사용할 수 있도록 twin.macro를 이용한 기본적인 셋업과 사용 방식에 대해 알아보겠습니다.

 

필요 라이브러리

Styled Components를 사용하기 위해 필요한 라이브러리를 설치합니다.

npm install styled-components
npm install @types/styled-components

# or

yarn add styled-components
yarn add @types/styled-components

 

Tailwind CSS를 사용하기 위해 필요한 라이브러리를 설치합니다. PostCSS 플러그인으로 설치하여 여러 빌드 tool에서 통합될 수 있도록 합니다.

npm install tailwindcss
npm install postcss
npm install autoprefixer

# or

yarn add tailwindcss
yarn add postcss
yarn add autoprefixer

 

Tailwind CSS를 Styled Components에서 사용할 수 있도록 twin.macro를 설치합니다.

npm install twin.macro

# or

yarn add twin.macro

# build tool vite 사용시
npm install vite-plugin-babel-macros

# or

yarn add vite-plugin-babel-macros

# Rollup, Webpack 사용시
npm install babel-plugin-macros

# or

yarn add babel-plugin-macros

 

기본 셋업

Styled Components와 Tailwind CSS의 사용을 위한 기본적인 셋업을 합니다.

 

1. PostCSS 설정

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

2. Tailwind CSS 설정

// tailwind.config.js
module.exports = {
  // template file path 
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  
  ...
};

// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

...

 

3. twin.macro 사용을 위한 설정

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    preset: 'styled-components',
  },
}

 

※ Vite 사용 시

// vite.config.ts
...
import macrosPlugin from 'vite-plugin-babel-macros';
...

export default defineConfig({
  ...
  
  plugins: [
    ...
    macrosPlugin()
  ],

  ...
})

 

※ Rollup, Webpack 사용 시

// .babelrc
{
  "plugins": [
    "babel-plugin-macros"
  ]
}

 

사용 방법

기본 셋업을 마치고 컴포넌트 내에서 사용 방식입니다.

// Component.tsx
import styled from 'styled-components';
import tw from 'twin.macro';

const Root = styled.div`
  ${tw`w-full h-20 bg-white`}
  ${tw`flex flex-wrap overflow-hidden`}
`;

const Item = styled.div<{ isHidden?: boolean }>`
  ${tw`w-5 h-5 bg-black text-lg text-white`}
  ${(props) => props.isHidden && tw`hidden`}
`;


function Component() {
  return (
    <Root>
      <Item>Item</Item>
      <Item isHidden={false}>Item Hidden</Item>
    </Root>
  );
}

export default Component;

 

마무리

Styled Components와 Tailwind CSS를 같이 쓰기 위해 설정을 하는 과정과 Tailwind CSS의 class name을 어느 정도 숙지를 해야 하지만 CSS in JS 라이브러리인 Styled Components의 장점과 Utility-first CSS인 Tailwind CSS의 장점을 같이 살려 생산성에 많은 도움이 되었습니다. twin.macro를 이용하여 Emotion에서도 Styled Components에서처럼 Tailwind CSS를 같이 쓸 수 있습니다. 필요에 따라 잘 적용하여 사용하면 되겠습니다.

 

---

참고 자료

https://github.com/ben-rogerson/twin.macro