Diving into svelte

Hi there,

I'm going to learn svelte now and like to invite all interested people to join me on my journey.
Ok lets get started.
At first I discovered that svelte has a nice interactive tutorial that lets you do learning by coding.
I want to test svelte on a specific app I thought about recently.

The App

So I thought about implementing a simple percentage calculator where I can manage categories and split them up into percentages.

The Stack (subject to changes)

• svelte
• sveltekit
• svelte-shadcn
• tailwind

I like the concept of shadcn. It's basically a low dependency lib ... no actually its not a lib. It's more a bunch of tailwind components.
Now the special thing about shadcn is that you add each component to your very own source code (instead of adding npm dependency) which gives you full ownership about it. It comes with a slick cli so I just had to execute a few commands.

What I did so far

Aside from creating a concept I've basically executed a series of commands.

To create the app

npx sv create percenty
(I had to answer a few questions, basically the answers were typescript, playwright, lint and prettier)

To add svelte-shadcn and tailwind (not in that order)

This step turned out trickier than expected given my lack of tailwind experience.
First tailwind needs to be added.

npx sv add tailwindcss

So far so good. I still had to do some stuff described in the official svelte tailwind installation guide.

Then I initialised svelte-shadcn with

npx shadcn-svelte@latest init

Adding a shadcn button failed ungracefully because I didn't have a tailwind.config.js.
I've added a basic config.

Then again the command for adding a shadcn button:

npx  shadcn-svelte@latest add button

Github repo

I've created a github repo which I'm going to update corresponding to blog posts.