DEV Community

Denis Donici
Denis Donici

Posted on

Sveltekit & Tailwind CSS Combo

#svelte #tailwindcss #vite #ux

Hi friends. I've decided to share my setup process for a perfect project with Svelte & Tailwind. Maybe some of you will find it useful. For those who are not familiar, the Svelte and Tailwind are a perfect match for quick and enjoyable web development. However, before, we had to manually configure everything in Rollup. Not anymore, with just a couple of simple commands, you get, IMHO, the best UX ever. Tailwind has just come out with JIT (just in time compiler) that makes it very quick. Add to this the new SvelteKit and Vite and you have an enjoyable web-dev process! Here are the commands:

  • We create a new folder and change the working directory to it 
mkdir my-app
cd my-app
Enter fullscreen mode Exit fullscreen mode
  • Initialize a new SvleteKit project in the folder 
npm init svelte@next
Enter fullscreen mode Exit fullscreen mode
  • Add the static adapter so we can build and export static files 
npm i -D @sveltejs/adapter-static
Enter fullscreen mode Exit fullscreen mode
  • Add Tailwind with JIT 
npx svelte-add tailwindcss  --jit
Enter fullscreen mode Exit fullscreen mode
  • Install all the dependencies 
npm i
Enter fullscreen mode Exit fullscreen mode
  • Run the development server

npm run dev

One thing to notice that in order to build static files we will need to modify a bit the svelte.config.cjs file in the root folder of the project.

Instead of

const node = require('@sveltejs/adapter-node');
Enter fullscreen mode Exit fullscreen mode

We need to import this

const static = require('@sveltejs/adapter-static');
Enter fullscreen mode Exit fullscreen mode

and also instead of the default node adapter

adapter: node(),
Enter fullscreen mode Exit fullscreen mode

we will need to add the static adapter like this

adapter: {
 adapt: static
        },
Enter fullscreen mode Exit fullscreen mode

After

npm run build
Enter fullscreen mode Exit fullscreen mode

in build folder, you'll find the files that could be uploaded to your CDN of choice for free hosting, like Vercel, Surge or Cloudflare. I hope it helps, my friends! Happy development!

Top comments (4)

Collapse
 
chenxeed profile image
Albert Mulia Shintra •

Hi, thanks for the combo guidelines!

I have followed the steps above and in my case, I need to do two more steps.

  • Inside svelte.config.js, import/require the tailwind & autoprefixer and add it to the postcss
  • In the Svelte template, add the style to import tailwind: 
<style global lang="postcss">
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
Enter fullscreen mode Exit fullscreen mode

I've made a boilerplate so I can refer it and reuse when needed. Hope it helps.

github.com/chenxeed/svelte-tailwin...

Collapse
 
ekanna profile image
ekanna •

One more step before

npx svelte-add tailwindcss --jit

is

npm install -D @tailwindcss/jit tailwindcss postcss

Nice article. Thanks

Collapse
 
babichjacob profile image
Jacob Babich •

Not true. You are supposed to install dependencies after the command runs with npm install or pnpm install or yarn.

Collapse
 
gevera profile image
Denis Donici •

Fixed that. Thanks

Read next

guivr profile image

TailConverter, a browser extension to convert any website to Tailwind CSS

Guilherme Rizzo -

abdenasser profile image

I love Rust/Tauri & Svelte

Nasser El Idrissi -

mike_andreuzza profile image

How to create a typewriter effect text animation with Tailwind CSS and JavaScript

Michael Andreuzza -

thomaschoi721 profile image

Does svelte5 have multi {@render} equivalent to ver.4’s multi named slot use inside +layout.svelte？

Thomas Choi -