Tailwindcss with SvelteKit
A couple of months ago I tried Tailwindcss and now I can’t imagine working on a project without it! Tailwindcss has made styling fun again. On the other hand, SvelteKit is a framework for building extremely high-performance web apps (definition taken from their site). SveleKit is based on Svelte and it’s still in early development as of now. There are known bugs but let’s just try it!
Install SvelteKit
First thing first, install the SvelteKit project. Let’s just follow the steps to install SvelteKit from the website. These commands will create a SvelteKit project named my-app. Once the installation is done, let’s add Tailwindcss to our project.
Add Tailwindcss to SvelteKit project
We use JIT (Just In Time) mode from Tailwindcss that is available in Tailwind v2.1+. It may prompt you to install the svelte-add package, just choose ‘Yes’.
After Tailwindcss is successfully installed, let’s install all of the packages in the project. type ‘npm install’
Voila! You just successfully installed Tailwindcss and SvelteKit project! To run your project in development mode just type ‘npm run dev’ and the project will run on ‘http://localhost:3000’.
