ElianCodes

← Back to blog

Published on 12/05/2021 22:45 by Elian Van Cutsem

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

← Back to blog
  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme forΒ Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎀 Am I an international public speaker now?

    🎀 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • πŸŽ‰ I started from scratch (again)

    πŸŽ‰ I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.