Svelte just announced their full official support for Typescript, here is a complete guide to set it up in a new project with TailwindCSS and SCSS.

Setting up Svelte with Typescript

I’ll be using yarn as package manager but you’re free to use npm if you like.

We start with the default Svelte template

npx degit sveltejs/template svelte-ts
cd svelte-ts
yarn

And then add Typescript with the provided setup script

node scripts/setupTypeScript.js
yarn

Typescript support relies on a few packages, so run your package manager again after the script has run.

Svelte now has an official VSCode extension for .svelte files. You should install it if you haven’t yet.

If you had the previous extension by James Birtles installed, you need to remove it first, you can do so by going to extensions and searching for @installed

Or just run that command line to remove it

code --uninstall-extension JamesBirtles.svelte-vscode

You can learn more about Svelte’s Typescript support here, it also describes how to manually do the setup for an existing project.

With that, we’re all set for using Typescript with Svelte.

Adding TailwindCSS

Add the tailwindcss package and generate the tailwind.config.js configuration file.

yarn add tailwindcss
npx tailwindcss init

Now we need to import Tailwind’s CSS classes into our app, let’s create a Tailwind.svelte component that will do that via a global style tag.

#tailwind-css #scss #typescript #svelte