Styled-component와 Tailwind 함께 사용하기 with Twin Macro

Styled-component와 Tailwind 함께 사용하기 with Twin Macro

원문 보러가기

Tailwind는 맞춤형 디자인을 빠르게 구축하기 위한 유틸리티 퍼스트 CSS 프레임워크입니다.

단독으로 React 앱의 스타일 설정에 사용할 수도 있지만,

Styled Components와도 잘 사용할 수 있습니다.

Tailwind CSS, Styled Components 및 Twin Macro를 사용하여 CSS를 한 줄도 작성하지 않고 form 컴포넌트를 만들어 봅니다.

왜 이 세가지를 동시에 사용하죠?

Tailwind 클래스는 상당히 길 수 있고,

이는 컴포넌트의 가독성과 유지보수성을 저해합니다.

Styled Components의 경우 직접 스타일을 작성해야 합니다.

 

Tailwind CSS는 유틸리티 클래스를 지원하고,

Styled Components는 CSS-in-JS의 도움으로 컴포넌트를 깨끗하게 유지합니다.

세팅하기

리액트로 간단한 폼을 만들어 봅니다.

터미널에서 다음 명령어를 실행해 봅시다.

    npx create-react-app react-styled-tailwind

 

다음으로 폴더 구조를 다음과 같이 구성합니다

├── src
|  ├── App.js
|  ├── App.test.js
|  ├── assets
|  |  └── tailwind.css
|  ├── index.js
|  ├── serviceWorker.js
|  ├── setupTests.js
|  ├── tailwind.config.js
|  └── styles
|     └── index.js
├── babel.plugin.js
├── package.json
├── postcss.config.js
├── README.md
├── yarn-error.log
└── yarn.lock

의존성을 설치합니다.

    yarn add -D tailwindcss twin.macro autoprefixer babel-plugin-macros postcss-cli

다음 명령을 실행하여 Styled Components를 설치합니다.

yarn add styled-components

Tailwind CSS 설정

구성 파일을 수동으로 추가하거나 다음 명령을 실행하여 새 파일을 생성해야 합니다.

    npx tailwind init src/tailwind.config.js

 

src/tailwind.config.js

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

 

아무 설정도 추가하지 않을 것이지만,

필요에 따라 커스터마이징 하거나 --full 옵션과 함께 명령을 실행하여 다른 Tailwind 구성을 얻을 수 있습니다.

다음으로 루트 디렉터리에 새 파일 postcss.config.js를 만들어야 합니다.

/postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss")("./src/tailwind.config.js"),
    require("autoprefixer"),
  ],
}

이 설정은 postcss.config.js 파일이 컴파일 타임 동안 Tailwind CSS 라이브러리와 tailwind.config.js 파일을 사용하도록 지시합니다. 또한 autoprefixer의 도움으로 접두사가 필요한 속성을 추적합니다.

 

루트 디렉터리에 Tailwind 클래스를 CSS-in-JS 코드로 변환하는 데 도움이 되는 babel.plugin.js 파일을 세팅합니다.

/babel.plugin.js

module.exports = {
  tailwind: {
    plugins: ["macros"],
    config: "./src/tailwind.config.js",
    format: "auto",
  },
}

나중에 우리는 이 파일이 하는 일을 보게 될 것입니다.

그러나 지금으로서는 이것이 Tailwind CSS와 Styled Components 사이의 접착제라는 점만 알아두셔도 됩니다.

설정을 완료하려면 앞으로 마지막 세 단계만 수행하면 됩니다.

 

tailwind.css 파일에서 Tailwind 라이브러리에서 일부 유틸리티를 가져옵니다.

src/assets/tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

두 번째 단계는 React 앱을 Tailwind CSS와 연결하는 것입니다.

/index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import "./assets/styles.css"
import * as serviceWorker from "./serviceWorker"

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
)

serviceWorker.unregister()

여기에서 CSS 스타일이 포함된 assets/styles.css를 가져옵니다.

기본 스크립트를 약간 조정하여 CSS를 빌드하고 컴파일하는 동안 assets/styles.css 파일에 추가합니다.

/package.json

"scripts": {
    "build:css": "postcss src/assets/tailwind.css -o src/assets/styles.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/styles.css",
    "start": "npm run watch:css & react-scripts start",
    "build": "npm run build:css react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
 }

이 두 스크립트 build:css 및 watch:css는 각각 CSS를 빌드하고, 변경 사항을 감시하고 필요한 경우 다시 빌드합니다.

출력 파일은 assets 폴더에 있습니다.

 

이제 앱에서 Tailwind를 사용할 수 있습니다.

 

이제 Tailwind CSS를 Styled Components와 결합해 보겠습니다.

Tailwind CSS and Styled Components

• attrs에 클래스명을 사용합니다.
• 중첩된 프로퍼티에서 Tailwind 클래스를 사용할 수 있도록 twin.macro 라이브러리의 tw를 가져옵니다.

styles/index.js

import styled from "styled-components"
import tw from "twin.macro"

// attrs에 클래스명을 사용한다!
const StyledForm = styled.main.attrs({
  className: "flex flex-col h-screen justify-center items-center bg-gray-100",
})`
  & {
    form {
      ${tw`bg-white text-center rounded py-8 px-5 shadow max-w-xs`}
    }
    input {
      ${tw`border-gray-300 mb-4 w-full border-solid border rounded py-2 px-4`}
    }
    button {
      ${tw`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-blue-700 rounded`}
    }
  }
`
export default StyledForm

twin.macro 라이브러리는 babel 플러그인 매크로 설정(babel.plugin.js)을 사용하여,

nested selector가 사용하는 Tailwind CSS 유틸리티 클래스를 스타일드 컴포넌트가 이해할 수 있는,

읽을 수 있는 코드로 변환합니다.

아래의 이 예에서 변환이 수행되는 방법을 볼 수 있습니다.

// input
const test = ${tw`text-center bg-red w-full`}
// output
const test = {
    background: 'red',
    textAlign: 'center',
    width: '100%'
}

이제 스타일드 컴포넌트를 App.js 파일에 추가해 보겠습니다.

App.js

import React from "react"
import StyledForm from "./styles"

function App() {
  return (
    <StyledForm>
      <form>
        <input type="text" placeholder="Full name" />
        <input type="text" placeholder="Email" />
        <input type="text" placeholder="Password" />
        <button>Sign In</button>
      </form>
    </StyledForm>
  )
}

export default App

 

완성된 form

 

 CSS 한 줄 작성하지 않고 form 컴포넌트를 완성했으며, 컴포넌트는 여전히 깔끔합니다.

완성된 소스코드 보기

반응형

결론

Tailwind CSS를 설정하는 데 약간의 번거로움이 있지만, CSS-in-JS와 결합하면 정말 강력하고 유연합니다.

이는 부분적으로 우리가 필요에 따라 tailwind.config.js 파일을 사용자 정의하거나,

일반적으로 Styled Components에서 하는 것처럼 일반 CSS를 작성할 수 있기 때문입니다.

주 : 컴포넌트 className을 짧게 가져가면서,
styled-components 사용 시의 장점인 ref를 이용한 인터랙션 구현의 편의성을 동시에 누릴 수 있습니다.

 

읽어 주셔서 감사합니다!