Creating a Svelte, Vite, and TailwindCSS 3 Template
December 29, 2021
At the end of 2021 I decided to create a very basic Svelte/Vite/TailwindCSS 3 template that would provide a starting point for future projects. Thanks to modern tooling and automation, the procedure is pretty simple, but I am documenting it here nonetheless.
Why not SvelteKit? Two reasons.
First, I already wrote instructions for scaffolding a SvelteKit/Vite/Tailwind site.
Second, I intend to use this as an Electron starter, for which I don't need SvelteKit.
Create a new Vite project with Svelte template
Scaffold a new Vite project with the
svelte-ts for TypeScript) template:
# for TypeScript use --template svelte-ts npm init vite@latest my-svelte-app -- --template svelte cd my-svelte-app npm install
Add TailwindCSS 3
npx svelte-add@latest tailwindcss npm install
This step automates most of Tailwind's configuration, by creating pre-populated configs for
tailwind.config.cjs, and filling in the required PostCSS config in
app.css and verify that it looks like this:
/* Write your global styles here, in PostCSS syntax */ @tailwind base; @tailwind components; /* Custom classes go here */ /* This will always be included in your compiled CSS */ @tailwind utilities;
That's it! Now run the site in dev mode with
npm run dev.