[FrontEnd] Svelte + TypeScript + TailwindCSS 에러 해결

Svelte + TypeScript + Tailwind CSS 를 이용한 웹 생성 관련 오류 해결법

1. TailwindCSS 설치 오류

npx tailwindcss init tailwind.config.cjs -p 

• 위 코드 실행시 발생하는 오류

해결법 1

• Powershell 권한 오류
  1. Win + R → powershell 입력 후 Ctrl + Shift + Enter (관리자 권한 실행)
  2. Get-ExecutionPolicy (권한 확인, Unrestricted 또는 RemoteSigned로 설정)
  3. Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
     • RemoteSigned: 로컬 스크립트 실행 허용, 인터넷에서 받은 스크립트는 서명이 필요
     • Unrestricted: 모든 스크립트 실행 허용 (보안상 권장하지 않음)
  4. powershell 재실행

해결법 2

• global package 경로 충돌
  1. npm list tailwindcss 로 tailwind 설치 여부 확인
  2. npm root -g, npm bin -g 실행으로 두 개의 경로가 같은지 확인
  3. 다르다면, npm config set prefix "경로" 코드로 같아지도록 설정

해결법 3

• 위 방법이 모두 안된다면 아래 코드로 실행해보기

npx svelte-add tailwindcss

• 이유는 모르겠는데 전 다 바꿔보고 맞게 설정했는데도 안됐었는데 이걸로 실행하니깐 바로 깔렸어요,,,, ㅠ

2. Svelte+TypeScript 모듈 오류

• 오류 메세지 : Cannot find module './App.svelte' or its corresponding type declarations
• 원인 : jsconfig.json 혹은 tsconfig.json 파일에서 typescript 컴파일러가 javascript 파일에 대한 타입 검사를 진행해서 발생
• 해결법 : 해당 json 파일의 "checkJs" 옵션을 true -> false 변경