[CSS]-클래스명 이제 생각하지마! Tailwind CSS!

기존 작업들은 모두 Emotion을 사용해서 styled-component 방식으로 CSS를 적용했는데 이번에 React에서 많이 사용하는 Tailwind CSS에 대해 배워보았다!!

Tailwind 공식사이트 바로가기

Tailwind CSS 설치하기

1. 터미널에 yarn add -D tailwindcss 입력
   
2. npx tailwindcss init 입력
   
3. tailwind.config.js 파일로 가서 경로 설정
   
4. 메인 최상위 css파일 상위에

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

코드 추가 (작업 파일은 index.css에 함!)

이렇게 설치를 끝냈다면
클래스명 추가만으로 원하는 style을 설정할 수 있다!
클래스명 추가 방법은 예를 들어 text의 스타일을 설정하고자 할 때,
text- 입력 후 command+i를 클릭하면 자동 완성 리스트가 뜬다!
vscode인 경우 Tailwind CSS IntelliSense 플러그인을 설치하면 command+i가 적용된다!

React에서 많이 쓰이는 CSS들의 장단점!

	CSS Module(Post CSS)	Styled Components	Tailwind
성능	Pure CSS	CSS in JS 성능에 좋지 않음 재컴파일 되어야 함	Pure CSS 미리 정해진 클래스 이름들을 조립 ➡️ 사용법을 익혀야 함
활용성	Anywhere	React, React-Native	Anywhere
강점	고립성/독립성 순수 CSS ➡️ 입문자에게 제일 좋음	고립성/독립성 JavaScript를 통한 편의성 ➡️ 비즈니스 로직과 스타일이 뒤엉킴	잘 정의된 디자인 시스템 클래스 이름 창작의 괴로움 태그와 스타일을 함께! ➡️ 다소 난잡해 보일 수 있음 ➡️유지보수 편한 방법 있음!