Sveltekit & Tailwind CSS Combo
#svelte#tailwindcss#vite#ux
Denis Donici

Denis Donici @gevera

About: Pure functions are great. Svelte/Sapper is succinct and straightforward. NixOS is easily declared in a single config

Joined:
Aug 24, 2020

Sveltekit & Tailwind CSS Combo

Publish Date: Mar 30 '21
28 5

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!

Comments 5 total

  • Denis Donici
    Denis DoniciMar 30, 2021

    Fixed that. Thanks

  • ekanna
    ekannaApr 2, 2021

    One more step before

    npx svelte-add tailwindcss --jit

    is

    npm install -D @tailwindcss/jit tailwindcss postcss

    Nice article. Thanks

    • Jacob Babich
      Jacob BabichMay 2, 2021

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

  • Albert Mulia Shintra
    Albert Mulia ShintraMay 29, 2021

    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...

Add comment