DEV Community

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

Posted on • Updated on

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

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)