요약

Tailwind와 Styled Components를 함께 사용하기 위해선 Tailwind, Twin.macro를 각각 설정해야한다.

1. Tailwind CSS 설정 (CRA)
2. Twin.macro 설정 (CRA)

처음에는 어떤 블로그 글을 보고 세팅했다가 공식문서도 함께 참고하니 굉장히 꼬여버려서..결국 최신 공식문서를 참고하니 설정하는 과정이 매우 간단했고 아주 아주 잘 작동한다. 반나절을 날려버린 삽질의 결과다.

Tailwind, Twin.macro를 순서대로 설정해보자!

1. Tailwind.CSS 설정(CRA)

먼저 Tailwind부터 설정하자.
Tailwind 공식문서에 CRA, Next.js, Svelte 등등 다양한 프레임워크에 대한 설치방법을 친절하게 제공하고 있다.

Tailwind 공식문서의 Framework Guide
https://tailwindcss.com/docs/installation/framework-guides

1) Tailwind CSS 설치

이미 CRA로 프로젝트를 생성했다는 전제하에 진행한다. 프로젝트의 최상단에서 npm install을 진행한다.

npm install -D tailwindcss

2) tailwind.config.js 설정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

content파일 섹션에서는 모든 tailwind.config.jsHTML 템플릿, JavaScript 구성 요소 및 Tailwind 클래스 이름이 포함된 기타 소스 파일에 대한 경로를 구성한다.

3) index.css 설정

/src/index.css 파일에 Tailwind의 directives를 추가한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

해당 파일은 index.js에 import되어있어 tailwind를 전역에서 사용할 수 있도록 한다.

4) build

공식문서에서는 npm run start로 build 하라고 되어있지만 npm start를 해도 똑같이 동작한다.

2. Twin.macro 설정(CRA)

이제 Twin.macro를 설정하자

Twin.macro?

먼저 Twin.macro가 뭔지 소개하자면,

Twin.macro는 유틸리티 클래스 기반의 CSS 프레임워크인 Tailwind를 CSS-in-JS 라이브러리인 Styled Components, Emotion과 함께 사용할 수 있도록 도와주는 라이브러리다.

twin 작동원리

• 런타임 이전에 컴파일시 tailwind 클래스를 CSS객체로 변환한다.
• 이렇게 생성된 CSS 객체는 추가적인 클라이언트 측 번들 없이 CSS-in-JS 라이브러리로 전달된다.

import tw from 'twin.macro'

tw`text-sm md:text-lg`

// ↓ ↓ ↓ ↓ ↓ ↓

{
  fontSize: '0.875rem',
  '@media (min-width: 768px)': {
    fontSize: '1.125rem',
  },
}

참고링크

Twin.macro의 깃헙에서 Twin, Create React App, Styled Components를 사용하기 위해 필요한 설정방법을 친절하게 안내하고 있다.

https://github.com/ben-rogerson/twin.examples/tree/master/cra-styled-components

1) 의존성 설치 (dependencies)

프로젝트 최상단에서 install을 진행한다.

npm install twin.macro tailwindcss styled-components

2) GlobalStyles.js 만들기

src/styles에 GlobalStyles.js 파일을 생성하여 아래를 복사, 붙여넣기 한다.

// src/styles/GlobalStyles.js
import React from 'react'
import { createGlobalStyle } from 'styled-components'
import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro'

const CustomStyles = createGlobalStyle`
  body {
    -webkit-tap-highlight-color: ${theme`colors.purple.500`};
    ${tw`antialiased`}
  }
`

const GlobalStyles = () => (
  <>
    <BaseStyles />
    <CustomStyles />
  </>
)

export default GlobalStyles

설명

Twin은 Tailwind와 동일한 preflight base style을 사용하여 크로스 브라우징 문제를 해결한다.

Preflight란 modern-normalize를 기반으로 구축되어 크로스 브라우징 문제를 해결하고 디자인 시스템 내부 조건 하에 쉽게 작업할 수 있도록 설계된 Tailwind 프로젝트를 위한 base style의 세트입니다.

3) GlobalStyles.js 불러오기

src/index.js 에 방금 만든 GlobalStyles.js를 불러오고 아래와 같이 추가해준다.

리액트 18버전

 // src/index.js
import React from 'react'
import GlobalStyles from './styles/GlobalStyles'
import App from './App'
import { createRoot } from 'react-dom/client'

const container = document.getElementById('root')
const root = createRoot(container)
root.render(
  <React.StrictMode>
    <GlobalStyles />
    <App />
  </React.StrictMode>,
)

리액트 17버전

나는 리액트 17버전을 사용하고 있었기 때문에 아래와 같이 추가해줬는데 잘 작동했다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import GlobalStyles from './styles/GlobalStyles';

ReactDOM.render(
  <React.StrictMode>
    <GlobalStyles />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

4) twin config 설정

twin config를 설정하는 방법은 두 가지가 있다. 둘 중에 아무거나 한 가지 편한 방법을 골라 설정하면 된다.

첫번째 방법

프로젝트 최상단에 babel-plugin-macros.config.js 파일을 만들어 아래를 복사, 붙여넣기 한다.

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

두번째 방법

기존에 있는 package.json 파일에 아래를 추가한다.

// package.json
// ...
"babelMacros": {
  "twin": {
    "preset": "styled-components"
  }
},

5) babel-plugin-styled-components 설치하기

npm install --save-dev babel-plugin-styled-components

설명

CSS 또는 tw props를 사용하려면 모든 파일에서 아래의 구문을 추가하여 import해야한다.

import 'styled-components/macro'

이러한 불편함을 해결하기 위해 babel-plugin-styled-components 를 설치하고 babel config에 추가할 수 있다. 하지만 이건 문제가 있다고 한다! (뭔진 모름)

CRA는 기본적으로 babel config를 바꿀 수 없게 되어있다고 한다. 그래서 babel config를 커스텀하기 위한 CRA 플러그인을 설치해야한다고 공식문서에 나와있는데, 해당 플러그인 설치없이 작동이 잘 됐다! ( 혹시 작동이 잘 안된다면 댓글 부탁.. )

6) babel-plugin-styled-components를 위한 .babelrc 설정

기존에 설정한 .babelrc 파일이 있다면 아래와 같이 추가한다. 없다면 프로젝트 폴더 최상단에 .babelrc 파일을 만들고 아래를 복사, 붙여넣기 하면 된다.

// .babelrc
{
  // ...
  "plugins": [
    // "babel-plugin-twin", // < If using
    "babel-plugin-macros",
    "babel-plugin-styled-components"
  ]
}

Twin + Styled Components 문법

다음 포스팅 참고

Tailwind와 Styled-components 2. 사용하기

Twin 공식문서 참고

1. The prop styling guide - A must-read guide to level up on prop styling

   twin.macro/prop-styling-guide.md at master · ben-rogerson/twin.macro

2. The styled component guide - A must-read guide on getting productive with styled-components

   twin.macro/styled-component-guide.md at master · ben-rogerson/twin.macro