DEV Community

kiranojhanp
kiranojhanp

Posted on • Edited on

8 2

Using tailwindcss (JIT) with sveltekit

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up