포스팅 목적
📖tailwind + styled components를 더욱 동적으로 사용하기 위한 twin.macro 사용에 대해서 알아보자.
사용목적
[React]TailwindCSS 사용해보기
[React]Tailwind + Styled Components 사용해보기
위의 게시글들을 포스팅하는 과정에서 느낀 것은 결국 Tailwind와 Styled Components를 혼합하여 적절한 컴포넌트를 생성하는 것이었다. 하지만 그러기에는 몇가지 제약사항이 있었다.
- tw(tailwind-styld-components)만 사용하면 css 파일을 별도로 config.js에 커스텀을 해주어야하는 불편함이 있다.
- tw 사용 시 props 사용에 대한 interface 선언이 TS에서 밖에 지원이 되지 않는다.
- styled.** 컴포넌트 내부에서 tw에 대한 클래스 사용에 제약사항이 발생한다.
더욱 많은 이유들이 있겠지만 나는 위의 사항들이 불편하여 해결방법을 찾아보다가 twin.macro를 알게되었다.
twin.macro란?
📖Tailwind CSS를 사용하기 위한 라이브러리로 styled-components를 사용하여 react 애플리케이션을 작성 할 때 클래스명 사용에 대한 편의성을 지원한다.
쉽게 설명하면 tailwind를 더욱 쉽게 작성하고 사용 할 수 있도록 지원하는 라이브러리이다.
twin.macro 사용
⚡️ 사용환경 설정
🖥️ 사전설치 항목
// 설치 경로 : React App 루트 디렉토리에서 npm 명령어 사용
// styled-components
npm install -D styled-components
// tailwindCSS
npm install -D tailwind
npx tailwind init
// tailwind-styled-components
npm install -D tailwind-styled-components
// twin.macro
npm install -D twin.macro @emotion/styled
// babel-plugin
npm install -D babel-plugin-macros모든 항목을 -D를 이용해 Dev 모드로 설치를 진행하였다. 다음은 간단한 설정들을 해보자.
🖥️ 사용설정
babel-plugin-macros.config.js
// root 디렉토리 경로 내에 babel-plugin-macros.config.js 생성
module.exports = {
twin: {
preset: 'styled-components',
},
}package.json
...
"babelMacros": {
"twin": {
"preset": "styled-components"
}
}
...모든 패키지 설치가 끝나고 위의 두 파일에 대한 설정을 완료해주면 twin.macro를 사용 할 준비가 끝났다.
⚡️ 사용
🖥️ tw 이용
import tw from "twin.macro";
const TestDiv = tw.div`
flex
w-screen
&{
...
}
`tw를 이용하여 컴포넌트를 생성하면 하위 요소(&)에 대한 css가 제대로 동작하지 않는다. 이럴때는 styled 컴포넌트를 이용하면 된다. 아래 코드를 보자.
🖥️ styled components 이용
import tw, {styled} from "twin.macro";
const TestDiv = styled.div`
${tw`flex`}
&{
...
}
`이러한 형태로 사용하면 된다.
주의를 해야하는 부분은 styled 컴포넌트 내부에 tailwind 클래스를 적용 할 때에는 백틱(`)을 반드시 사용하고 적용해주어야한다. 단점은 자동완성 기능이 지원되지 않는다. 그래서 나의 경우에는 태그 내부에서 원하는 클래스명을 찾아보고 복사해서 붙여넣는다.
🖥️ props 이용
import tw, {styled} from "twin.macro";
const TestDiv = styled.div`
${tw`flex`}
background: ${props => props.color}
`위와 같은 형태로 컴포넌트를 정의하였다면 아래와 같이 props.color를 부여 할 수 있다.
...생략
<TestDiv color='blue'></TestDiv>이 외에도 더욱 많은 기능들이 있지만 사용을 하면서 알아봐야 할 것 같다.
마무리
처음에는 TailwindCSS를 이용해서 스타일을 가볍게 입히려고 했지만 역시 하다보니 욕심이 많아지고 더욱 편리한 걸 찾게되는 것 같다. 그래서 순차적으로 빌드업을 하다보니 twin.macro까지 오게된 것이다.
백엔드 개발자로 성장하고 있지만 왜 이렇게 스타일에 집착하는지는 나도 알지 못한다. 그냥 불편하다. 안이쁘면 불편하다. 그렇다고 내가 이쁘게 만들 수 있는 건 아니지만... 참고하면 조금은 더 이뻐지니까 그러니까 계속 신경이 쓰이는 것 같다.
이제 정말로 새로운 프로젝트를 시작 할 준비가 된 것 같다.
그럼 이만.👊🏽
