Use TailwindCSS with Sveltekit (2021)

Since my previous blogpost on using TailwindCSS (JIT) with Sveltekit, a lot has changed. That’s why I’ve updated the article to a newer (and better) method.

Setting up Sveltekit

Setting up a new Sveltekit project is not that hard anymore. Just run the following set of commands:

npm init svelte@next tailwind-sveltekit-app

You can always search the official documentation for more info

Adding an adapter

In most cases, I tend to use Sveltekit as a static site generator. To tell Sveltekit to create static pages, add the static-adapter with following command:

npm i @sveltejs/adapter-static@next

Also add the following to the svelte.config.cjs

const adapter = require("@sveltejs/adapter-static");

module.exports = {
  kit: {
    adapter: adapter({
      pages: "build",
      assets: "build",
      fallback: null,
    }),
  },
};

This tells Sveltekit to put the output in the build folder and dont use a fallback (so generate a index.html, 404.html, contact.html, …)

more info on the adapter here

Adding TailwindCSS

Previously I described some additional steps to install Tailwind, like installing autoprefixer and PostCSS. I also setup some extra NPM scripts.

Since TailwindCSS is used a lot across the web these days, it got way easier. Just use the following command:

npx svelte-add@latest tailwindcss

This will install TailwindCSS, PostCSS and other dependencies. It will also add the configuration and a basic app.css file with Tailwind imported.

Written by Elian Van Cutsem