Vite로 Tailwind CSS v4.0 설치하기 🚀

Tailwind CSS는 `flex`, `pt-4`, `text-center`, `rotate-90`과 같은 클래스를 사용하여 마크업 내에서 직접 디자인을 구축할 수 있도록 해주는 유틸리티 우선 프레임워크입니다. HTML을 벗어나지 않고도 빠른 UI 생성을 가능하게 하여 현대적인 웹 개발을 간소화합니다. 버전 4.0에서는 모든 것이 `global.css` 또는 `index.css`와 같은 단일 CSS 파일에 포함됩니다. 이 튜토리얼에서는 Vite와 React를 사용하여 Tailwind CSS v4.0으로 다크 모드를 구현합니다. 설치 방법은 공식 문서를 방문하여 다양한 프레임워크, CLI 또는 CDN 사용법에 대한 지침을 참조하십시오. 설치하려면 `npm install tailwindcss @tailwindcss/vite` 명령어를 실행하십시오. 다음으로, 필요한 imports와 plugins를 사용하여 `vite.config.js`를 생성하거나 업데이트하여 Vite 플러그인을 구성합니다. 그런 다음, `@import "tailwindcss";`를 추가하여 메인 CSS 파일에 Tailwind CSS를 가져옵니다. 마지막으로 `npm run dev`를 실행하여 개발 서버를 시작하면 Tailwind CSS가 통합된 앱이 실행됩니다. 이 단계를 통해 프로젝트에서 Tailwind CSS 사용을 빠르게 시작할 수 있습니다.