[Svelte] Svelte + Vite + TypeScript + Tailwind 프로젝트 생성

진행환경

OS: macOS

node --version: v18.16.0

npm --version: 9.5.1

 

 

1.  vite 프로젝트 생성

npm init vite@latest

 

2.  프로젝트 이름 설정

 

 

3.  프레임워크 선택 ( Svelte )

 

 

4.  타입스크립트 선택 ( TypeScript )

 

 

5.  프로젝트 생성완료

 

6.  프로젝트 실행결과

cd svelte-vite-ts-tailwind
npm install
npm run dev

http://localhost:5173/ 접속

 

결과

 

 

7.  Tailwind CSS 설치

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

 

 

8.  tailwind.config.js 수정

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

 

9.  app.css 수정

src/app.css 내용을 수정하시면 됩니다.

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

 

 

10.  App.svelte 수정

src/App.svelte 내용을 수정하시면 됩니다.

<main>
  <h1 class="text-3xl font-bold underline">Hello world!</h1>
</main>

<style lang="postcss">
  :global(html) {
    background-color: theme(colors.gray.100);
  }
</style>

 

결과

 

 

[Github]: https://github.com/pcm9881/svelte-vite-ts-tailwind

GitHub - pcm9881/svelte-vite-ts-tailwind: Svelte + Vite + TypeScript + Tailwind CSS

 

참조 

[TailwindCSS Document sveltekit]: https://tailwindcss.com/docs/guides/sveltekit

Install Tailwind CSS with SvelteKit - Tailwind CSS