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

Intro

Follow below steps line by line.

Step 1 : Create project with vite

• References
  • https://frontendshape.com/post/how-to-install-setup-vite-typescript-in-svelte

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

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

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