Svelte Kit with TailwindCSS and JIT
April 12, 2021
Svelte Kit is currently in public beta, but it's caused a lot of chatter over the interwebs, and that made me give it a spin.
Here's a super simple setup to scaffold a Svelte Kit static site. Since I also ❤️ TailwindCSS, I have instructions for that as well. And to make it a complete package, it all runs on Vite, for a super fast ⚡️ development environment.
# 1. Create a new Svelte Kit site # My choices: no TypeScript, SCSS, ESLint, Prettier npm init svelte@next my-app cd my-app # 2. Install packages npm install # 3. Add TailwindCSS npx svelte-add tailwindcss --jit
Step 3 automates most of Tailwind's configuration, by creating pre-populated configs for
tailwind.config.cjs, and filling in the required PostCSS config in
To finalize installing Tailwind, open
app.scss and add the base Tailwind styles right at the top:
@tailwind base; @tailwind components; @tailwind utilities; // Custom CSS from here on ...
Finally start it in dev mode, and open it in the browser.
# Run in development mode, and open the site in the browser npm run dev -- --open