Add Tailwind CSS In Svelte Kit Project

 In this blog you will learn How To Add Tailwind CSS to your Svelte Kit Project.

1. Creating Svelte Kit Project

To create Svelte Kit Project use this command "npm init svelte@next project_name" and it will create a Svelte Kit project for you. 

NOTE: Svelte Kit is still in beta and can be unstable sometime

2. Adding Tailwind CSS

To add Tailwind CSS use this command "npx svelte-add tailwindcss --jit" and this command will add Tailwind CSS to your Svelte Kit Project. It has dependency so you have to install the packages using 

"npm install" and it will also create a tailwind.config.js file in order to use Tailwind CSS.

Why Tailwind CSS?

• It is Highly Customizable
• It Has Common Utility Patterns
• It Can Be Optimized Using PurgeCSS
• It Enables Building Complex Responsive Layouts Freely
• It Facilitates Fluid Community Interaction

If you like this blog and want tutorials on Svelte and Svelte Kit do subscribe to our Youtube Channel.