Svelte Kit with TailwindCSS and JIT

April 12, 2021

Svelte Kit with TailwindCSS and JIT

Svelte is my all-time favorite JS framework. Fresh on its heels comes Svelte Kit, a framework for generating static sites with Svelte. Just what the doctor ordered.

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 postcss.config.cjs, tailwind.config.cjs, and filling in the required PostCSS config in 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;

// 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
Svelte TailwindCSS
Liked this article? Share it on your favorite platform.
Picture of me