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.
Open your terminal or your favorite IDE (VSCode for me).
type in the following command
npm init @vitejs/app
yarn create @vitejs/app
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
This is a list of available options we can install to our project
- svelte-add/bulma: Add Bulma to your SvelteKit project
- svelte-add/firebase-hosting: Add hosting on Firebase to your SvelteKit project
- svelte-add/graphql: Add a GraphQL server to your SvelteKit project
- svelte-add/mdsvex: Add mdsvex to your SvelteKit project
- svelte-add/postcss: Add PostCSS to your SvelteKit project
- svelte-add/tailwindcss: Add Tailwind CSS to your SvelteKit project
- svelte-add/windicss: Add Windi CSS to your SvelteKit project
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
Install our dependencies and then run the dev script.
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.