이번에는 svelte+typescript+tailwind css를 설치해보도록 하겠습니다.
참고 문헌
https://dev.to/swimmingkiim/create-svelte-typescript-tailwindcss-projectfeat-error-solved-4g24
svelte+typescript
먼저 svelte+typescript를 설치해보겠습니다.
vite를 사용해 설치합니다.
npm create vite@latest
yarn create vite
콘솔창에 아래와 같은 내용이 뜨는군요
✔ Project name: … svelte-ts
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla
vue
react
preact
lit
❯ svelte 프로젝트 이름을 설정해주면 어떤 프레임워크를 사용할 것인지 묻숩니다.
우리는 svelte를 사용하기 때문에 svelte를 선택해줍니다.
그 다음 타입스크립트를 설치해봅시다.
✔ Project name: … svelte-ts
✔ Select a framework: › svelte
? Select a variant: › - Use arrow-keys. Return to submit.
svelte
❯ svelte-ts이후 설치할 때 생성된 디렉토리로 이동 후 모듈을 설치해줍니다.
cd svelte-ts
npm install
npm run dev
npm run dev가 문제 없이 실행된다면 svelte + typescript가 정상적으로 설치된 것입니다.
tailwind css
이제 tailwind css를 설치할 예정인데요,
공식문서를 참고해 설치해봅시다.
https://tailwindcss.com/docs/guides/sveltekit
공식문서는 sveltekit에 tailwind css를 설치하는 가이드인데
우리는 기본 svelte만 사용할 것이기에 몇 가지 과정은 빼도록 하겠습니다.
먼저 아래 명령어를 통해 tailwindcss를 설치해봅시다.
npm install -D tailwindcss postcss autoprefixer svelte-preprocess
npx tailwindcss init tailwind.config.cjs -p
tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
// **here**
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {},
},
plugins: [],
}그리고 tailwind.config.cjs 파일의 content 부분을 위와 같이 수정합니다.
/src/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;app.css 파일 최 상단에 tailwind 관련된 설정을 해줍니다.
/src/layout.svelte
<script>
import "./app.css";
</script>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
마지막으로 컴포넌트에 app.css를 import 하고 npm run dev 하여 결과를 확인합니다.
결과
완성..!
