How to Setup Svelte with TailwindCSS in 3 steps

Photo by Ferenc Almasi on Unsplash

I have an oddly random deep love for Svelte in that I wish Rich Harris would give me a shout out! By day I’m a .NET developer but I just love the ease of use that Svelte provides which has some familiarities to Blazor. So I thought that I might give a quick rundown on how you can fall in love as well by using some cutting edge tools that will get you up and running quickly.

Step 1

NOTE: Vite requires Node.js version >=12.0.0.

With NPM:
npm init @vitejs/app
With Yarn:
yarn create @vitejs/app
-Name your project (default is vite-project)
-Select your template (Svelte in our case)
-Follow the instructions except for npm run dev

At this point we should have the basic structure of our app built. However, we are missing our CSS framework. There is an npm package that will help add this with very little configuration. Svelte-add

Step 2

For the purpose of this article and our project we are only concerned with add tailwindcss. So run the following command in your terminal

npx svelte-add tailwindcss

Step 3

npm install && npm run dev

Congrats! Your Svelte app is up and running and using tailwind CSS right out of the box!

Now you can head on over to Tailwind CSS Components and pick out some choice community created components for you to use.

.NET developer with a focus in functional programming. Oh yea, and I'm a foodie!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store