DEV Community

Cover image for Create Svelte + Typescript + tailwindcss Project(feat. error solved)
swimmingkiim
swimmingkiim

Posted on • Edited on

Create Svelte + Typescript + tailwindcss Project(feat. error solved)

#svelte #webdev #tutorial #typescript

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Solution 

npm install -D tailwindcss postcss autoprefixer svelte-preprocess npx tailwindcss init tailwind.config.cjs -p
Enter fullscreen mode Exit fullscreen mode 
// 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, }) }
Enter fullscreen mode Exit fullscreen mode 
// tailwind.config.cjs /** @type {import('tailwindcss').Config} */ module.exports = { // **here** content: ['./src/**/*.{html,js,svelte,ts}'], theme: { extend: {}, }, plugins: [], }
Enter fullscreen mode Exit fullscreen mode 
// src/app.css @tailwind base; @tailwind components; @tailwind utilities;
Enter fullscreen mode Exit fullscreen mode 
// src/routes/+layout.svelte <script> import "../app.css"; </script> <slot />
Enter fullscreen mode Exit fullscreen mode

Step 3 : Check default code is running ok 

npm run dev
Enter fullscreen mode Exit fullscreen mode

default view when you first run

Buy Me A Coffee

Top comments (0)