Since my previous blogpost on usingTailwindCSS (JIT) withSveltekit, a lot has changed. That's why I've updated the article to a newer (and better) method.

Setting up Sveltekit

Setting up a new Sveltekit project is not that hard anymore. Just run the following set of commands:

npm init svelte@next tailwind-sveltekit-app

You can always searchthe official documentation for more info

Adding an adapter

In most cases, I tend to use Sveltekit as a static site generator. To tell Sveltekit to create static pages, add the static-adapter with following command:

npm i @sveltejs/adapter-static@next

Also add the following to thesvelte.config.cjs

constadapter=require('@sveltejs/adapter-static');module.exports={kit:{adapter:adapter({pages:'build',assets:'build',fallback:null})}};

This tells Sveltekit to put the output in thebuild folder and dont use a fallback (so generate aindex.html,404.html,contact.html, ...)

more info on the adapterhere

Adding TailwindCSS

Previously I described some additional steps to install Tailwind, like installing autoprefixer and PostCSS. I also setup some extra NPM scripts.

Since TailwindCSS is used a lot across the web these days, it got way easier. Just use the following command:

npx svelte-add@latest tailwindcss

This will install TailwindCSS, PostCSS and other dependencies. It will also add the configuration and a basicapp.css file with Tailwind imported.