DEV Community

loading...

Sveltekit & Tailwind CSS Combo

gevera profile image Denis Donici ・2 min read

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!

Discussion (5)

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
nikolahristov profile image
Niki Hristov

Just a heads up that you can add highlighting to the code blocks if you'd like. Just change: code block with no colors example ... to specify the language: code block with colors example More details in our editor guide!

Collapse
gevera profile image
Denis Donici Author

Fixed that. Thanks

Forem Open with the Forem app