DEV Community

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

Posted on • Edited on

3 2

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

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay