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!

Leave a Reply

Your email address will not be published.