Install Tailwind CSS in Svelte with Typescript Using Vite

In this section we will see how to install & setup svelte with typescript using vite in tailwind css. For this project we will use vite +svelte + typescript + tailwind css.

Create Svelte Project Via Vite

Run below command to install svelte project.

With NPM:

npm create [email protected]

With Yarn:

yarn create vite

With PNPM:

pnpm create vite

Next, Select Svelte framework

? Select a framework: » - Use arrow-keys. Return to submit.
  Vanilla
  Vue
  React
  Preact
  Lit
>  Svelte
  Others

Select Typescript

? Select a variant: » - Use arrow-keys. Return to submit.
>  TypeScript
  JavaScript
  SvelteKit ↗

Move to project dir. and install npm dependencies.

 cd project-name
 npm install
 npm run dev

Install Tailwind CSS In Svelt

Run below command to install tailwind css in svelte.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Add the paths to all of svelte template files in your tailwind.config.js file.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now add tailwind directives to your app.css

app.css

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

Import app.css file in you main.js or main.ts

 main.js or main.ts

import './app.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app

Now test tailwind classes in svelte with typescript.

App.svelte

<script lang="ts">
  let message: string = "Vite + Svelte + TypeScript + Tailwind CSS"
</script>

<main>
  <div class="flex items-center justify-center h-screen">
    <h1 class="text-4xl font-bold text-blue-500">
      How to Use {message}
    </h1>
  </div>
</main>

vite + svelte + typescript + tailwind css

Run svelte server

npm run dev