The new Svelte (sv) CLI, adding Tailwind is simple now

Aight! With Svelte Summit Fall 2024 done with we got a load of cool new announcements, Svelte 5 being the big one along with the new site and docs! Beautiful!

One of the other big announcements was the new Svelte CLI sv which combines svelte-add with the create svelte command.

So, now rather than searching around for How to Set Up Svelte with Tailwind CSS it’s a couple of commands!

It can be installed as a global dependency or just run with npx.

To scaffold out a new project, I can use the sv CLI and give it a name:

1npx sv@latest create my-awesome-project

Then I can add all the things! Check out the options!

1npx sv@latest create my-awesome-project
2┌  Welcome to the Svelte CLI! (v0.5.7)
3│
4◇  Which template would you like?
5│  SvelteKit minimal
6│
7◇  Add type checking with Typescript?
8│  Yes, using Typescript syntax
9│
10◆  Project created
11│
12◆  What would you like to add to your project?
13│  ◻ prettier (https://prettier.io)
14│  ◻ eslint
15│  ◻ vitest
16│  ◻ playwright
17│  ◻ tailwindcss
18│  ◻ drizzle
19│  ◻ lucia
20│  ◻ mdsvex
21│  ◻ paraglide
22│  ◻ storybook
23└

So I can go select ALL them things!

But I’ll just go with the defaults I always pick so that I can go over the other command:

1npx sv@latest create my-awesome-project
2┌  Welcome to the Svelte CLI! (v0.5.7)
3│
4◇  Which template would you like?
5│  SvelteKit minimal
6│
7◇  Add type checking with Typescript?
8│  Yes, using Typescript syntax
9│
10◆  Project created
11│
12◆  What would you like to add to your project?
13│  ◼ prettier
14│  ◼ eslint
15│  ◼ vitest
16│  ◼ playwright (https://playwright.dev)
17│  ◻ tailwindcss
18│  ◻ drizzle
19│  ◻ lucia
20│  ◻ mdsvex
21│  ◻ paraglide
22│  ◻ storybook
23└

That’ll create my project, and the thing is, most of the use cases here will be people that already have a project and want to add Tailwind.

Now I’ve already got the project created, so I can just add Tailwind with the add command:

1npx sv@latest add tailwind
2┌  Welcome to the Svelte CLI! (v0.5.7)
3│
4◆  Which plugins would you like to add?
5│  ◻ typography (@tailwindcss/typography)
6│  ◻ forms
7│  ◻ container-queries
8│  ◻ aspect-ratio
9└

Notice that I used the tailwind keyword in the command, this will prompt for additional plugins to configure with it!

Alternatively, I can just run npx sv@latest add and then select Tailwind from the list along with anything else I’d like to configure!

Super neat!

It’s early days for the new CLI and I have found an issue configuring MDSveX but it’s only going to get better from here with the prospect of community additions on the roadmap!