I am sharing my setup that uses SvelteKit with TailwindCSS. This blog post is going to be extremely short – as the setup is very straightforward!
Installation
First start by creating a SvelteKit app
npm init svelte@next my-app
Obviously, replace ‘my-app’ with name of your app.
We are going to use npm package svelte-add to create configuration needed for tailwindcss.
cd my-app/
npx svelte-add@latest tailwindcss
npm install
git init && git add -A && git commit -m "Initial commit"
npm run dev -- --open
You should see this running on localhost –
http://localhost:3000
How do you test to make sure the tailwindcss is successfully installed ?
In your app.css file add following lines (First three lines should already be there)
/* App.css file */
@tailwind base;
@tailwind components;
@tailwind utilities;
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-700;
}
Now, Open index.svelte and add following code
<button class="btn btn-blue"> AskUsHow?</button>

You should see the button nicely styled!
Adios amigos ~~ see you next time!