I ❤️ Svelte, especially when combined with tailwind css. Usually you'd have to setup all the configuration on your own but there's a easier alternative.
The introduction of sveltekit provides cool stuffs like routing out of the box. Here's a super easy setup to scaffold a Svelte Kit static site.
# 1. Create a new sveltekit site # My choices: TypeScript, SCSS, ESLint, Prettier npm init svelte@next handsome-app # 2. Navigate inside your project cd handsome-app # 3. Install packages npm install # 4. Add TailwindCSS npx svelte-add tailwindcss
Step 4 does all the hard work for you, by creating
postcss.config.cjs, tailwind.config.cjs and svelte.config.cjs.
To finalize installing Tailwind, open
app.scss and add the base Tailwind styles right at the top:
@tailwind base; @tailwind components; @tailwind utilities;
Now you can start the server
# Run in development mode, and open the site in the browser npm run dev -- --open