Tailwind CSS란?
- HTML 내부에서 CSS 스타일을 가능하게 하는 CSS 프레임워크
CSS 프레임워크 정의
- 레이아웃과 컴포넌트 구성, 브라우저 호환성을 보장하며 개발 시간을 최소화하는 CSS 파일 모음
- 빠른 애플리케이션 스타일링에 유용
React JS에서 사용 가능한 CSS 프레임워크 종류
- Material UI
- React Bootstrap
- Semantic UI
- Ant Design
- Materialize
Tailwind CSS의 장점
- Bootstrap처럼 미리 설정된 유틸리티 클래스를 활용해 빠르게 스타일링 가능.
- 클래스나 ID 명명에 고민할 필요 없음.
- 유틸리티 클래스에 익숙해지는 데 시간이 필요하지만 IntelliSense 플러그인을 통해 빠르게 적응
Extension Install
-
Tailwind CSS를 사용하기 위해 해당 Extension을 설치
-
유틸리티 클래스를 작성하려고 하면 사진에서 보이는 것과 같이,
예시들을 제공하기에 필요한 것을 선택해서 사용할 수 있음
Tailwind 적용
npm install -D tailwindcss
- tailwindcss 모듈 설치
npx tailwindcss init
- Tailwind CSS 프로젝트를 설정하기 위해 기본 설정 파일을 생성하는 명령어
- tailwind 설정 파일
위 사진의 설정을tailwind.config.js파일에 입력
- tailwind 지시자 설정
tailwind.css를 사용하기 위한 설정 완료
