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

badassong·2023년 4월 24일
0

CSS

목록 보기
7/7
post-thumbnail

기존 작업들은 모두 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 ComponentsTailwind
성능Pure CSSCSS in JS
성능에 좋지 않음
재컴파일 되어야 함
Pure CSS
미리 정해진 클래스 이름들을 조립
➡️ 사용법을 익혀야 함
활용성AnywhereReact, React-NativeAnywhere
강점고립성/독립성
순수 CSS
➡️ 입문자에게 제일 좋음
고립성/독립성
JavaScript를 통한 편의성
➡️ 비즈니스 로직과 스타일이 뒤엉킴
잘 정의된 디자인 시스템
클래스 이름 창작의 괴로움
태그와 스타일을 함께!
➡️ 다소 난잡해 보일 수 있음
➡️유지보수 편한 방법 있음!
profile
프론트엔드 대장이 되어보쟈

0개의 댓글