First steps with SvelteKit and Tailwind CSS JIT

Let’s build a simple page with SvelteKit! Just recently I stumbled across slate and its design system while reading about filecoin. Today I will use their design system and Tailwind CSS JIT to create a little page in SvelteKit.

Step 1 — Setup Project

Setting up the project I basically followed the “Getting Started” section in the SvelteKit docs: https://kit.svelte.dev/docs#introduction-getting-started

mkdir my-app
cd my-app
npm init svelte@next
npm install
npm run dev

At the init step I chose the following settings: SvelteKit skeleton project, no typescript, add ESLint and add Prettier.

The last command starts the development server on localhost:3000. We are ready to go!

Step 2 — Setup Tailwind CSS Jit

Again, following a guide. Credits to Matt Lehrer!

1. Installation and Initialization (from the Tailwind CSS “Getting Started” Guide)

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init

2. Setup CSS purging in production + JIT (taken from Matt Lehrer and Tailwind Blog)

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: ['src/app.html', 'src/**/*.svelte'],
...
}

3. Include Tailwind in CSS. Create style.css(taken from Matt Lehrer)

/* ./src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 3 — Final adjustments to project

intended src folder file structure

Remember, we used a SvelteKit skeleton to setup our project. Now we have to make some small adjustments before we can start. The intended src/ file structure is depicted on the left.

Create src/$layout.svelte

Create a file src/$layout.svelte. It will import style.css on every route (taken from Matt Lehrer):

Remove unused files

Delete src/global.d.ts.

Now we are ready to go!

Step 4— Create simple page using slate design system

Now let’s start creating our a simple page using slate design system! For the beginning I want to add a h1 heading and a “Radial Tidy Tree” using d3 (link)

Create h1 heading

Here is an excerpt from the sds source code for h1 headings:

filecoin-project/slate

Translated to Tailwind styles:

font-normal font-inter text-sds-h1 break-words no-underline

Change tailwind.config.cjs :

Resulting code for index.svelte :

Gives us at localhost:3000:

Create radial tidy tree from d3.js

We will now adapt this d3.js “Radial Tidy Tree” example to work in Svelte. We will only apply necessary changes to get it to work, not using Svelte + d3.js to its full potential.

Every line I changed is commented with single line JS comments. The according explanation can be found above in a multi line JS comment:

/* Explanation
*/
// Wrong code
Correct code

Which results in:

Credits

As already mentioned above, credits go to

• Matt Lehrer
• The creators of slate
• Mike Bostock from d3.js

This article is just about putting together the knowledge they so kindly shared!