ElianCodes

← Back to blog

Published on 03/26/2021 18:27 by Elian Van Cutsem

Using TailwindCSS with Sveltekit

This post is very outdated, check the new post for an updated version

Earlier this week, Sveltekit beta got released (read all about it here). Since it’s so new, I wanted to try out some stuff, including using it with TailwindCSS. That seemed a little bit more complex than I initially thought.

What is Sveltekit

Sveltekit is very comparable to Nuxt and Next, but with Svelte. It provides server-side rendering, routing and code-splitting. Also, Sveltekit uses Vite right out of the box, which makes it incredibly fast.

Bootstrap Sveltekit

To start a new project is actually very easy with Sveltekit. Just run the following commands in an empty directory:

npm init svelte@next

Then, install your dependencies using yarn or npm install. For the rest of this post I’ll use yarn, but use NPM if you like.

To start up the project using Vite, run the dev command

yarn dev

Now your newly bootstrapped Svelte app should be running on https://localhost:3000

Install TailwindCSS

Since Sveltekit is so new, we currently have to use a little workaround to use TailwindCSS, but I imagine that they’ll introduce PostCSS support in the 1.0 release of Sveltekit. We’ll use the postcss-cli package to trigger a build of our PostCSS configuration before we run a build command, which works fine, but you’ll need to rebuild Tailwind every time into a static CSS file which can take up some time.

So, let’s install TailwindCSS and PostCSS

yarn add -D tailwindcss postcss autoprefixer postcss-cli

Following that, we can create a TailwindCSS configuration file using:

npx tailwindcss init

Now create a tailwind.css file in src/assets/css/ and add the following content:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

This will tell PostCSS what utilities you’re using.

Configure PostCSS

Now that we have installed TailwindCSS, we just need to configure Svelte to actually use it. To do that, create a file called postcss.config.cjs in the root of your project and tell it to use autoprefixer and tailwindcss to process CSS files:

module.exports = {
  plugins: [require("autoprefixer"), require("tailwindcss")],
};

Now we can add a new script to our package.json, so it builds TailwindCSS before the main build:

"scripts": {
    "dev": "svelte-kit dev",
    "build": "yarn build:tailwind && svelte-kit build",
    "build:tailwind": "postcss ./src/assets/css/tailwind.css -o static/assets/css/tailwindoutput.css",
    "start": "svelte-kit start",
},

Here we configure a script that will run when yarn build:tailwind or yarn build is triggered. The script will compile tailwind from the local /src/assets/css/tailwind.css and add it to the static folder (/static/assets/css/tailwindoutput.css) where we’ll be able to use it.

Now we can include the file globally by adding the output CSS file as a stylesheet in the /src/app.html file.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="../assets/css/tailwindoutput.css" type="text/css" />
    %svelte.head%
  </head>
  <body>
    <div id="svelte">%svelte.body%</div>
  </body>
</html>

Now when you’ve ran yarn build:tailwind once, TailwindCSS should work in your markup!

Don’t forget to include the generated TailwindCSS output file to your .gitignore if you’re using git.

Add @tailwindcss/jit

To save some more time in the compilation and configuration of TailwindCSS, we can use the @tailwindcss/jit package. I dedicated a whole blogpost about that, so read it if you’re interested and would like to learn more about that.

It’s actually easy and I recommend that you use it!

Install the package

yarn add -D @tailwindcss/jit

Tell PostCSS to switch packages by changing require('tailwindcss') to require('@tailwindcss/jit') in postcss.config.cjs

module.exports = {
  plugins: [require("autoprefixer"), require("@tailwindcss/jit")],
};

That should do it!

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.