좌충우돌 Tailwind 도입기

CSS 플러그인 도입배경

• 작업 속도 향상
• 새로운 Tool 도전

Tailwind 설치 트러블슈팅

1. 1차 도전 : 공식문서 방식대로 tailwind+postcss 설치 + tailwind-elements

• postcss-loader Not found error

2. 2차 도전 : 공식문서 + 구글링 + tailwind-elements

• postcss-loader Not found error

3. postcss-loader 해결을 위한 추가 구글링

• webpack 유실 오류

4. Node module 폴더 삭제 후 yarn install, croca 설치
5. tailwind+postcss+croca+ tailwind-elements

• 오류

6. 깃 클론 후 tailwind+postcss+croca+flowbite-react
   💙성공💙

Flowbite 도전기

• flowbite 문서에서 html 태그 활용 : 기능 미작동, 별도의 자바스크립트 작업 필요 확인
• flowbite-react 문서 컴포넌트 활용 : 그런 컴포넌트는 없다!

//1차시도
import Tabs from 'flowbite-react'

//2차시도
import Tabs from 'flowbite-react/Tabs'

//3차시도
import { Tabs } from 'flowbite-react'

3차시도가 정답입니다...

Tailwind 활용계획

• 설치에만 2일을 날려버린 라이브러리, 사실 이 기간동안 styled-components를 사용했으면 벌써 css도 절반쯤 완료되었겠다 싶어서 빠르게 판단하고 버렸어야 하나 싶기는 하지만, 아직 팀원분이 기능 개발을 진행하고 있는 단계였기때문에 시간을 좀 더 투자할 수 있었다.
• 컴포넌트와 몇가지 tailwind 코드를 섞어서 배치해보니 작업방식 자체는 나쁘지않은것 같은데, 정해진 디자인 스타일에 맞춰서 반응형유무 등은 어떻게 설정하면 좋을지, 재사용은 어떤식으로 하면 좋을지 고민이 좀 필요할 것 같다.
• 1차 목표는 테일윈드로 빠르게 작업 쳐내기
• MVP 이후 테일윈드로 작업한 결과물 중 재사용이 되는 친구는 깔끔하게 @apply로 정리하기(단, 2회 이상 재사용되는 경우에만 apply를 하는 것으로 원칙을 정한다)