Intro
Follow below steps line by line.
Step 1 : Create project with vite
npm create vite@latest
Need to install the following packages:
create-vite@latest
Ok to proceed? (y) y
? Project name: › test-vite-svelte-typescript
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
Vue
React
Preact
Lit
❯ Svelte
Others
? Select a variant: › - Use arrow-keys. Return to submit.
JavaScript
❯ TypeScript
SvelteKit ↗
Scaffolding project in /Users/kimsooyoung/Documents/Test/test-vite-svelte-typescript...
Done. Now run:
cd test-vite-svelte-typescript
npm install
npm run dev
Step 2 : Solve tailwindcss error
Error log
npm install
npm run dev
오후 6:33:35 [vite] Internal server error: [postcss] ENOENT: no such file or directory, open '/Users/kimsooyoung/Documents/Test/test-vite-svelte-typescript/tailwind.config.js'
Plugin: vite:css
File: /Users/kimsooyoung/Documents/Test/test-vite-svelte-typescript/src/app.css:undefined:undefined
at Object.openSync (node:fs:585:3)
at Object.readFileSync (node:fs:453:35)
at createModule (/Users/kimsooyoung/node_modules/tailwindcss/lib/lib/getModuleDependencies.js:16:32)
at Object.getModuleDependencies [as default] (/Users/kimsooyoung/node_modules/tailwindcss/lib/lib/getModuleDependencies.js:24:24)
at getTailwindConfig (/Users/kimsooyoung/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:41:58)
at /Users/kimsooyoung/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:124:92
at /Users/kimsooyoung/node_modules/tailwindcss/lib/processTailwindFeatures.js:43:11
at plugins (/Users/kimsooyoung/node_modules/tailwindcss/lib/index.js:20:104)
at LazyResult.runOnRoot (/Users/kimsooyoung/Documents/Test/test-vite-svelte-typescript/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/Users/kimsooyoung/Documents/Test/test-vite-svelte-typescript/node_modules/postcss/lib/lazy-result.js:393:26)
Solution
npm install -D tailwindcss postcss autoprefixer svelte-preprocess
npx tailwindcss init tailwind.config.cjs -p
// svelte.config.js
import sveltePreprocess from 'svelte-preprocess'
export default {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
// **here -> postcss: true**
preprocess: sveltePreprocess({ postcss: true, })
}
// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
// **here**
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 />
Step 3 : Check default code is running ok
npm run dev
Top comments (0)