TailwindCSS & Shadcn UI 사용한 이유 - ssseok/wedding.invitation GitHub Wiki

TailwindCSS & Shadcn UI 사용한 이유?

• 제 프로젝트를 빠르게 개발하기 위해서는 TailwindCSS와 Shadcn UI를 선택했습니다.
• Shadcn UI는 컴포넌트를 제공하여 재사용성이 우수하고, 빠르게 개발할 수 있는 장점이 있습니다.
• 좋았던 점은 커스텀마이징이 쉽게 가능하기에 스타일 변경 및 조정할 수 있기에 선택하였습니다.
• TailwindCSS 학습하기 위해 선택했습니다.

---

TailwindCSS 사용방법(14버전 기준입니다.)

bun add tailwindcss @tailwindcss/vite

• 루트 src/index.css & src/main.css 에 @import "tailwindcss"; import 해줍니다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';
import tailwindcss from '@tailwindcss/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
  },
});

• vite로 만든 프로젝트이기에 vite.config.ts plugins에 tailwindcss() 넣어주면 세팅 끝.

---

Shadcn UI 사용방법

bunx --bun shadcn@canary init

Shadcn UI Themes을 사용한 경우

• 커스텀마이징을 해서 코드를 복사하여 src/index.css & src/main.css 루트 css에 넣어줍니다.

---

참고

https://tailwindcss.com/

https://ui.shadcn.com/