6. TailwindCSS

[B0XERCAT]

TailwindCSS

지금까지는 CSS 파일을 분리했었지만

이제는 className에 CSS를 작성해 보아요!

또한 Tailwind를 지원하는 UI 라이브러리인

Shadcn을 활용해서 컴포넌트를 만들어 봅시다

---

필수 공부 자료

• TailwindCSS 코딩루팡

• Tailwind Cheat Sheet

  • 치트시트는 공부하기 보다 필요할 때마다 찾아보면 됩니다!

---

실습 과제

실습하기 전에 반드시

git switch main
git pull
git checkout -b [깃허브 이름]/25-[브랜치 이름]

으로 새로 브랜치를 생성해주세요!

React+TailwindCSS+Shadcn 환경 세팅

Vite를 이용해 React 프로젝트를 생성하고 Shadcn 을 사용하기 위한 세팅을 해보아요~!

Vite Shadcn 를 참고해주세요!

1. Create Project

Project name: 12w
Select a framework: React
Select a variant: TypeScript + SWC
cd 12w
npm i
npm run dev

vite로 프로젝트를 만든 경우 실행할 때
npm run dev를 사용하시면 됩니다!

나머지 2, 3, 4, 5, 6 단계까지 순차적으로 진행해주세요!

@vitejs/plugin-react 부분에서 오류가 있는 분들은

npm i @vitejs/plugin-react

로 설치하시면 됩니다!

기존 CSS TailwindCSS로 대체하기

우선 지난 주차까지 진행한 코드를 현재 프로젝트로 옮겨주세요!

1. 컴포넌트들을 옮기고 components 폴더에 옮기고
2. App.tsx 파일도 복붙해 주시고
3. index.css에는 reset.css 내용을 넣어주세요!
4. react-icons랑 react-router-dom 만 따로 설치해주시면 아마 작동할 겁니다

기존 CSS 파일의 내용을 Tailwind Cheat Sheet 봐가면서 하나씩 tailwind로 바꿔주세요!

Shadcn 라이브러리 사용

1. 기존 badge를 Shadcn badge로 대체
2. 캠퍼스 필터의 각 버튼을 Shadcn button으로 대체

tailwind.mp4

Hint

button과 badge의 variant를 사용하면 쉽게 테마를 바꿀 수 있어요!