Svelte 설치 및 실행 (with TailwindCSS)

Svelte Kit 사용 관련 공식 URL : https://kit.svelte.dev/docs/creating-a-project 

Creating a project • Docs • SvelteKit

Svelte 프로젝트 생성

# 최신 버전으로 프로젝트 생성
# 프로젝트 생성 시 옵션 선택하여 ESLint & Prettier 설치
npm create svelte@latest [프로젝트_이름] 
# 생성된 프로젝트로 이동
cd [프로젝트_이름] 
npm i 
npm run dev

Svelte 설정

vite config

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [sveltekit()],

	// 서버 옵션 설정
	server: {
		host: true, //서버 IP 설정
		port: 10000, //서버 포트 설정
		open: '/', //서버 시작 후 자동으로 브라우저에 보여줄 페이지 경로 설정
		cors: true, //CORS 설정 (boolean으로는 모든 Origin 허용/차단만 설정 가능하고 특정 Origin 설정은 cors 패키지에서 제공하는 CorsOption 객체 이용)
		watch: {
			usePolling: true
		}
	},
	//Preview : 배포 결과물을 로컬에서 테스트할 때 사용
	preview: {
		port: 4173 //서버 포트(로컬 접속) 설정
	},
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});

Svelte config

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter(),
		files: {
			// hook path
			hooks: {
				server: "src/hooks/hooks.server",
			},
		},
	}
};

export default config;

TailwindCSS 설치

https://tailwindcss.com/docs/guides/sveltekit

Install Tailwind CSS with SvelteKit - Tailwind CSS

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

// tailwind.config.js

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

/* ./src/app.css */

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

// ./src/routes/+layout.svelte

<script>
  import "../app.css";
</script>

<slot />