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
Top comments (2)
step 4 should be
npx svelte-add tailwindcss
jit is now a default option, adding--jit
will give errorUpdated. Thanks.