Coming from React, I was amazed at how easy development with Svelte was, some of the features that required loads of libraries with React, are in fact offered out-of-the-box with Svelte. There are so many great things about Svelte, I was instantly “hooked” (no pun intended 😁) after reading the docs and have been using it ever since.

Tailwind is an amazing, responsive CSS utility library that allows you to write all of your styles as HTML classes, here is a link to a great tutorial if you want to get started with it.

I’ve been using tailwind with React, and the first thing I searched after discovering svelte was how to add Tailwind CSS to it. The purpose of the tutorial will be to give you a step by step guide, the link to the repo will be provided at the end of this guide.

We will be using PostCSS in this tutorial, head over to this link to learn all about it if you are new to this.

Create A Svelte App

First of all, create a svelte app by entering the following command.

npx degit sveltejs/template your-awesome-project
cd your-awesome-project && yarn

#Or if you are using npm
npx degit sveltejs/template your-awesome-project
cd your-awesome-project && npm install

#tailwind-css #front-end-development #svelte #javascript #sveltejs