프로젝트 생성

1. vscode를 열어 Ctrl + ` 로 터미널을 열어 프로젝트를 생성할 폴더 위치로 이동한다.
   
2. npm init vue@latest 커맨드를 입력한다.
   
3. 프로젝트에 적용을 원하는 옵션들을 선택해준다.
   
4. 생성된 프로젝트 위치로 이동하여 npm run dev 커맨드를 입력하면 Vite 기반의 기본 페이지를 확인 할 수 있다.
   

   • Vite 란?
     -

---

Tailwind 적용

프로젝트 생성은 끝났고 이제 생성된 프로젝트에 Tailwind를 적용시킬 것이다.
출처) https://prmblogs.tistory.com/entry/VuejS-Tailwind-CSS-Tailwind-CSS-%EC%84%A4%EC%B9%98-%EB%B0%8F-VUEJS-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

• Tailwind 란?
  -

1. Tailwind와 관련 의존성 패키지를 설치한다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. (1)번 커맨드를 실행하면 postcss.config.js 와 tailwind.config.js 파일이 생성되는데,
   tailwind.config.js 파일의 content필드에 추가로 설정을 해준다.

/** @type {import('tailwindcss').Config} */
export default {
  content: ['index.html', 'src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. css파일을 생성한다.

/* src/index.css */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

4. main.js에 (3)에서 만든 css 파일을 import 해준다

import '@/index.css';

5. tailwind가 잘 적용되었는지 확인한다.