[react] tailwindcss 테일윈드CSS

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다.

우분투 환경에서 진행함

 

세팅

테일윈드 CSS는 부트스르탭과 같은 CSS 프레임워크를 쉽게 개발할 수 있게 해주는 저수준 프레임워크이다. 리액트 프레임워크와 함께 사용해서 컴포넌트 스타일링을 쉽게 할 수 있다.

 

테일윈드 CSS는 PostCSS 플러그인 방식으로 동작한다. 따라서 PostCSS, autoprefixer, 테일윈드CSS를 함께 설치해야 한다.

npm i -D postcss autoprefixer tailwindcss
#구성 파일 만들기
npx tailwindcss init -p
#daisyui 플러그인 설치
npm i -D daisyui
#기타 플러그인 설치
npm i -D @tailwindcss/line-clamp

• daisyui: 테일윈드css 자체에는 css 컴포넌트(btn,.)가 없다. daisyui플러그인을 설치해야 다양한 테일윈드 CSS 컴포넌트를 사용할 수 있다.
• line-clamp: 여러 줄의 텍스트를 지정한 줄 수로 잘라서 표시해주는 플러그인

 

 

tailwind css 기능을 반영하기 위해서는 src/index.css에 아래 세 줄을 추가해야 한다.

//tailwind css 기능 반영하기
@tailwind base;
@tailwind components;
@tailwind utilities;