How to add TailwindCSS in SvelteKit

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
Code language: CSS (css)

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
Code language: JavaScript (javascript)

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;
}
Code language: JavaScript (javascript)

Now, Open index.svelte and add following code

<button class="btn btn-blue"> AskUsHow?</button>
Code language: HTML, XML (xml)

You should see the button nicely styled!

Adios amigos ~~ see you next time!