Create Svelte + Typescript + tailwindcss Project(feat. error solved)
Tags: typescript, svelte, webdev, tutorial
Published: 2022-12-02 10:01:10

## 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](https://frontendshape.com/post/how-to-install-setup-vite-typescript-in-svelte)

```bash
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

```bash
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](https://tailwindcss.com/docs/guides/sveltekit)

```bash
npm install -D tailwindcss postcss autoprefixer svelte-preprocess

npx tailwindcss init tailwind.config.cjs -p
```

```jsx
// 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, }) 
}
```

```jsx
// tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  // **here**
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

```css
// src/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
```

```html
// src/routes/+layout.svelte

<script>
  import "../app.css";
</script>

<slot />
```

## Step 3 : Check default code is running ok

```bash
npm run dev
```

![default view when you first run "npm run dev"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ht3noi1130fz1amo982f.png)

<a href="https://www.buymeacoffee.com/swimmingkiim" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/arial-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>