[Sveltekit] sveltekit + tailwind + typescript 프로젝트 생성

프로젝트 생성

npm init svelte@latest my-app

• my-app 자리에 프로젝트 이름

프로젝트 설정

1. SvelteKit demo app 선택
2. Yes, using Typescript syntax 선택
3. 편한거 선택(나는 Add ESLint for code linting)

프로젝트 경로로 이동

cd my-app

테일윈드 설치

npm install -D tailwindcss postcss autoprefixer

테일윈드로 초기화

npx tailwindcss init -p

프로젝트 설정

1. 기본적으로 이건 되어 있음
   svelte.config.js 가서 vitePreprocess 가 import 되어 있고, config에 등록되어 있는지 확인
2. tailwind.config.js 파일에 확장자 추가
   content: ['./src/**/*.{html,js,svelte,ts}'], 컨텐츠 부분 이 코드로 변경
3. src/routes/styles.css 파일경로에 @import '@fontsource/fira-mono'; 밑에다가 아래 코드 붙여넣기

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

   warning 메세지가 뜬다면, PostCSS Language Support 라는 익스텐션 설치