DEV Community

kiranojhanp
kiranojhanp

Posted on • Edited on

Using tailwindcss (JIT) with sveltekit

#svelte #tailwindcss #jit

Sveltekit and tailwindcss

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Now you can start the server

# Run in development mode, and open the site in the browser
npm run dev -- --open
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
avikki profile image
AviKKi •

step 4 should be npx svelte-add tailwindcss jit is now a default option, adding --jit will give error

Collapse
 
kiranojhanp profile image
kiranojhanp •

Updated. Thanks.