Svelte + Typescript + Tailwind

Coming from the Angular world back to Javascript can sometimes feel lackluster. The power of types is too much to resist. Lately, I've been playing around with React and Svelte. To be fair, I am liking Svelte a lot for a small single-page website. Combining these two was a must for me, So here is a post penning down the steps you will need to make your Svelte project run on TypeScript.
Tailwind is a superb CSS framework that can be powerful in bringing your ideas to life in a responsive way 😋.

Installation

Add Svelte project

Clone the svelte repo to your directory with:

npx degit sveltejs/template your-project

Convert it to Typescript

Now change the current directory to your-project and run this command to convert your current JavaScript project to TypeScript, and install packages

cd your-project
node .\scripts\setupTypeScript.js
npm i

Add Tailwind

Install required packages by running the command:

npm i tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

To add tailwind.config.js to your project:

npx tailwindcss init  tailwind.config.js

Setup for your first run

tailwind.config.js

Head over to tailwind.config.js file and add this future property at bottom

future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
},

To purge unnecessary classes in production modify purge property to:

purge: {
    content: ["./src/**/*.svelte"],
    enabled: isProduction, // disable purge in dev
},

You won't want purging to be enabled in dev mode, to identify we can use the ROLLUP_WATCH flag.

const isProduction = !process.env.ROLLUP_WATCH;

rollup.config.js

To enable tailwindss during dev and production builds update preprocess property to

preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
          plugins: [require("tailwindcss"), require("autoprefixer")],
    },
}),

App.svelte

You can add this to your App.svelte or optionally this can also be done by creating a new svelte component and then importing it in App.svelte

<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Now you're ready to rock🤘, run your Svelte project with:

npm run dev